一秧秉、代碼層面
1帕棉、區(qū)分v-if和v-show的使用場(chǎng)景
2针肥、區(qū)分computed與wacth的使用場(chǎng)景
3、避免v-for與v-if同時(shí)使用香伴,v-for優(yōu)先級(jí)比v-if高慰枕。可使用computed先過濾再渲染
4即纲、懶加載(圖片具帮,路由,UI組件庫低斋,組件)
5蜂厅、監(jiān)聽事件及時(shí)銷毀
6、服務(wù)端渲染
7膊畴、使用精靈圖
8掘猿、盡量減少http請(qǐng)求
9、使用服務(wù)端渲染: SEO優(yōu)化唇跨,首屏加載速度更快
二稠通、Webpack 層面
1、開啟圖片壓縮买猖,安裝image-webpack-loader
2改橘、減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼? 插件:?babel-plugin-transform-runtime
3、提取公共代碼 插件:CommonsChunkPlugin
4政勃、構(gòu)建結(jié)果輸出分析: 插件webpack-bundle-analyzer
5唧龄、開啟gzip壓縮: conetnt-Ecoding: gzip;
6奸远、使用強(qiáng)緩存????
7既棺、各種依賴包使用cdn方式引入
8、使用speed-measure-webpack-plugin查看具體步驟耗時(shí)
9懒叛、使用happyPack或者thread-loader開啟多線程打包縮短時(shí)間
10丸冕、使用catch-loader,二次打包是對(duì)loader進(jìn)行緩存
11薛窥、開啟webpack-bundle-analyzer構(gòu)建圖形化打包分析
12胖烛、使用terser-webpack-plugin進(jìn)行多線程代碼壓縮