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.小图标应用 SVG2.通过 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>