vue性能优化_PHP_内存溢出

vue性能优化

一、路由懒加载（让路由时才加载对应组件）

①目的：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

②对比演示：

没有使用懒加载时

import About from '../views/About.vue'
 const routes = [{
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于',
    },
  }],

使用懒加载时

 const routes = [ {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta: {
      title: '关于',
    },
  }],

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jx997ZUh-1648954009065)(…/…/…/AppData/Roaming/Typora/typora-user-images/image-20211216142306482.png)]

二、打包优化（缩小js体积）

①引入模块分析插件

package.json修改配置（build后面加入–report）

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report",
    "lint": "vue-cli-service lint"
  },

下载分析工具

npm install  --sava-dev webpack-bundle-analyzer

vue.config.js中进行配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()],
  },
}

打包会生成report.html的文件在dist文件下

可以看到哪个模块占的体积最大，大的模块是优先优化的对象

②使用cdn替换体积大的本地包

webpack配置过滤无需打包的一些库

配置项位置:vue.config.js
配置项:externals
语法：key:value
1. 其中key是第三方依赖库的名称，同package.json文件中的dependencies对象的key一样。
2. value值是库对应绑定到window上的全局变量名称

配置演示：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  // 打包后的资源引入路径
  publicPath: './',
  lintOnSave: true,
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
       vuex: 'Vuex',
      'element-ui': 'ELEMENT',
      axios: 'axios',
    },
    plugins: [new BundleAnalyzerPlugin()],
  },
}

查看全局变量技巧

i.先引入cdn从猫云
```
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.js">script>
```
ii.关闭import标签对应库
```
/* import 'bootstrap/dist/js/bootstrap' */
```
iii.打包构建，完成后打开dist下的index.html, 向控制台输入console.log(window.xx) xx为对应库开始字符，根据提示就可以找到全局变量了

iv.演示

通过cdn的方式从外地引入过滤掉的库
1. 从猫云引入cdn，当然版本要和package.json的一致
2. 在public的index.html文件下导入cdn，（这里要访问服务器肯定需要有网络，唯一要担心的cdn库发生了问题）
3. 使用演示：
  
  i.复制路径
  
  ii.引入

       <body>
           <noscript>
               <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
          noscript>
           <div id="app">div>
                    
      <script src="https://cdn.bootcdn.net/ajax/libs/twitterbootstrap/5.0.2/js/bootstrap.js">script>
        body>