[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.