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',//登录名:'denglu',component:()=>import('../components/denglu'),meta:{//menutitle:'login'}}//webpack导入方法{path:'/denglu',//登录名:'denglu',component:resolve=>(require(['../components/denglu'],resolve)),meta:{//menutitle:'login'}}4.组件的按需导入，比如elementsuiantDesign等框架提供了按需导入，需要哪些功能导入哪些组件。例子：elementUIimportVuefrom'vue';import{Button,Select}from'element-ui';importAppfrom'./App.vue';Vue.component(Button.name,Button);Vue.component(Select.name,Select);/*或写作*Vue.use(Button)*Vue.use(Select)*/newVue({el:'#app',render:h=>h(App)});五、优化图标和图片的合理性1、小图标使用SVG2。通过base64和webp加载小图片3.尝试使用CND加载大图片4.图片的懒加载，大部分ui框架都有图片懒加载，不能用v-lazy6.取消控制台打印module.exports={configureWebpack:config=>{//取消控制台打印config.optimization.minimizer[0].options.terserOptions.compress.drop_console=true}}7.gzip压缩constproductionGzipExtensions=['js','css'];module.exports={productionSourceMap:false,//不显示map源码//gzip压缩configureWebpack:config=>{if(process.env.NODE_ENV==='production'){配置。plugins.push(newTerserPlugin())config.plugins.push(newCompressionWebpackPlugin({algorithm:'gzip',test:newRegExp('\\.('+productionGzipExtensions.join('|')+')$'),threshold:10240,minRatio:0.8}))}//取消控制台打印config.optimization.minimizer[0].options.terserOptions.compress.drop_console=true},}服务器nginx也需要部署gzip代码如下服务器{gzip上;gzip_static开启；gzip_buffers416k;gzip_comp_level8；gzip_types应用程序/javascript文本/plain应用程序/x-javascript文本/css应用程序/xml文本/javascript应用程序/x-httpd-php图像/jpeg图像/gif图像/png；#压缩文件类型gzip_varyon;}8.生成分析包查看打包后的账号对比，分析，（以上内容已优化压缩）查看是否多次引入vue.config.jschainWebpack: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添加--report"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild--report","lint":"vue-cli-servicelint"},执行命令后会在dist中生成一个report.html打开文件就是分析图表1.keep-alivepagecachekeep-alive会缓存当前页面的数据，避免重复调用接口，重复渲染占用性能
