本文轉自百度：https://baijiahao.baidu.com/s?id=1655581973404072017&wfr=spider&for=pc
一．源碼優(yōu)化
1、代碼模塊化躏尉，咱們可以把很多常用的地方封裝成單獨的組件，在需要用到的地方引用，而不是寫過多重復的代碼口糕，每一個組件都要明確含義譬胎，復用性越高越好，可配置型越強越好庆寺，包括咱們的css也可以通過less和sass的自定義css變量來減少重復代碼蚊夫。
2、for循環(huán)設置key值俐筋，在用v-for進行數(shù)據(jù)遍歷渲染的時候但汞，為每一項都設置唯一的key值，為了讓Vue內部核心代碼能更快地找到該條數(shù)據(jù)被盈，當舊值和新值去對比的時候琅轧，可以更快的定位到diff伍绳。
3、Vue路由設置成懶加載乍桂，當首屏渲染的時候冲杀，能夠加快渲染速度。
4睹酌、更加理解Vue的生命周期权谁，不要造成內部泄漏，使用過后的全局變量在組件銷毀后重新置為null憋沿。
5旺芽、可以使用keep-alive，keep-alive是Vue提供的一個比較抽象的組件辐啄，用來對組件進行緩存采章，從而節(jié)省性能。
二．打包優(yōu)化
1壶辜、修改vue.config.js中的配置項悯舟，把productionSourceMap設置為false，不然最終打包過后會生成一些map文件砸民，如果不關掉抵怎，生成環(huán)境是可以通過map去查看源碼的，并且可以開啟gzip壓縮阱洪，使打包過后體積變小便贵。
2、使用cdn的方式外部加載一些資源冗荸，比如vue-router承璃、axios等Vue的周邊插件，在webpack.config.js里面蚌本，externals里面設置一些不必要打包的外部引用模塊盔粹。然后在入門文件index.html里面通過cdn的方式去引入需要的插件。
3程癌、減少圖片使用舷嗡，因為對于網(wǎng)頁來說，圖片會占用很大一部分體積嵌莉，所以进萄，優(yōu)化圖片的操作可以有效的來加快加載速度。可以用一些css3的效果來代替圖片效果中鼠，或者使用雪碧圖來減少圖片的體積可婶。
4、按需引入援雇，咱們使用的一些第三方庫可以通過按需引入的方式加載矛渴。避免引入不需要使用的部分，無端增加項目體積惫搏。比如在使用element-ui庫的時候具温，可以只引入需要用到的組件。
