vue 性能优化

1、v-for和v-if不要在同一级使用,v-for比v-if的优先级高 会先执行循环，同时使用了会每次循环都执行一次v-if，
2、vue 中使用的js资源 尽量的使用cdn方式在加载，以此减少打包之后的体积
例：

externals: {
  jquery: 'jQuery'
}
//[webpack外部扩展功能](https://www.webpackjs.com/configuration/externals/)

3、路由器的按需加载

//ES6方式加载
{
    path:'/denglu', //登录
    name:'denglu',
    component:()=>import('../components/denglu'),
    meta:{ //菜单
      title:'登录'
    }
}
//webpack 引入方式
{
    path:'/denglu', //登录
    name:'denglu',
    component:resolve=>(require(['../components/denglu'],resolve)),
    meta:{ //菜单
      title:'登录'
    }
}

4、组件的按需引入，例如element ui ant Design等框架提供的都有按需引入 ，需要哪些功能引入哪些组件。
例：element UI

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

5、图标和图片的合理性优化

1.小图标使用 SVG
2.通过 base64 和 webp  的方式加载小型图片
3.大图片尽量使用CND的方式加载
4.图片的懒加载，大部分ui框架都带有图片懒加载的，没有可以使用v-lazy

6、取消console打印

module.exports = {
    configureWebpack: config => {
        // 取消console打印    
        config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    }
}

7、gzip压缩

const productionGzipExtensions = ['js', 'css'];
module.exports = {
    productionSourceMap: false, //不显示map 源码
    //gzip 压缩
    configureWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        config.plugins.push(new TerserPlugin())
        config.plugins.push(new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        }))
      }
      // 取消console打印    
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
    },
}

服务器 nginx 也需要部署gzip代码如下

server{
     gzip  on;
    gzip_static on;
    gzip_buffers 4 16k;
    gzip_comp_level 8;
    gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 
    gzip_vary on;
}

8、生成分析包 查看打包之后的占比，进行分析，（以上的内容已经进行优化和压缩）查看是否多次引入
vue.config.js

    chainWebpack:config =>{
        // 删除预加载 真正的按需加载
        config.plugins.delete('prefetch');
        /* 添加分析工具*/
        if (process.env.NODE_ENV === 'production') {
          if (process.env.npm_config_report) {
              config
                  .plugin('webpack-bundle-analyzer')
                  .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                  .end();
              config.plugins.delete('prefetch')
          }
        }
    }

或者
package.json 在build中添加 --report

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

执行命令后会在dist中生成一个report.html 文件 打开文件就是分析图表

1、keep-alive页面缓存 keep-alive 会缓存当前页面的数据，避免重复调用接口 重复渲染占用性能

<keep-alive :include="tagsList">
   <router-view :key="$route.fullPath"></router-view>
</keep-alive>