[toc] ### 1.代码层面的优化 #### 1.利用 v-if 和 v-show减少初始化渲染和切换渲染的性能开销 比如dialog弹框，首先这个组件可以通过import懒加载，第二，dialog框这个组件内部可以先用一个v-if包裹起来，等外部调用的时候，把这个v-if改为true，同时更新dialogVisible属性为true，这样这个组件就被使用了，而关闭组件还是只改变dialogVisible + 外部使用dialog ```js <template> <div> <Button type="primary" @click.native="add">添加</Button> <add v-model="add.show" v-bind="add"></add> </div> </template> <script> export default{ data(){ return{ add:{ show:false, init:false } } }, components:{ add:() =>import('./add.vue') }, methods:{ add(){ this.add.show=true; this.add.init=true } } } </script> ``` + dialog内部 ```js <template> <div v-if="init"> <Modal v-model="show" title="添加" @on-cancel="handleClose"></Modal> </div> </template> <script> export default{ props:{ value:{ type:Boolean, default:false }, init:{ type:Boolean, default:false } }, data(){ return{ show:false, } }, watch:{ value(val){ if(val){ this.show = val; } } }, methods:{ handleClose(val) { this.$emit('input', val); }, } } </script> ``` #### 2.computed, watch, methods要注意分场景使用 有些功能这三个需求是都可以实现的，但是合理的使用可以避免一些性能消耗+ computed：适合性能消耗比较大的计算 比如要遍历一个巨大的数组计算，computed因为具有有一个缓存特性，只有依赖的值发生了变化时，他才会重新计算，否则直接返回缓存值 + methods: 可以实现 computed一样的计算，但是没有缓存功能 + watch：监听一个数据，执行callback回调函数 适合数据变化时需要执行一些异步操作的情况 #### 3.避免v-if和v-for同级，防止v-for渲染出不必要的dom 因为vue2中，v-for的优先级比v-if高，所以可以先通过computed过滤一遍内容，再进行 v-for #### 4.给v-for循环添加key提高diff算法计算速度，避免dom的损耗 #### 5.Object.freeze()冻结不需要响应式变化的数据 #### 6.防抖和节流 #### 7.图片懒加载和优化 #### 8.挂载节点内放置静态页面，优化白屏显示 #### 9.路由懒加载 ## 打包优化 #### 1.splitChunks #### 2.MiniCssExtractPlugin #### 4.