一、代碼包優化
1、屏蔽sourceMap
在vuejs項目的config目錄下有三個文件dev.env.js(開發環境配置文件)、prod.env.js(上線配置文件)、index.js(通用配置文件)
在build對象中的配置信息中，productionSourceMap修改成false:
2、對項目代碼中的JS/CSS/SVG(*.ico)文件進行gzip壓縮
index.js的通用配置，productionGzip設置爲true
但是首先需要對compress-webpack-plugin支持
所以需要通過 npm install --save-dev compression-webpack-plugin
3、對路由組件進行懶加載
優點是可以減少app.[hash].js體積，缺點就是會把其它js分開打包，造成多個js文件，會有多次https請求。如果項目比較大，需要注意懶加載的效果。
二、源碼優化
1、v-if 和 v-show選擇調用
v-if是懶加載，當狀態爲true時纔會加載，並且爲false時不會佔用佈局空間；v-show是無論狀態是true或者是false，都會進行渲染，並對佈局佔據空間對於在項目中，需要頻繁調用，不需要權限的顯示隱藏，可以選擇使用v-show
2、爲item設置唯一key值
在列表數據進行遍歷渲染時，需要爲每一項item設置唯一key值，方便vuejs內部機制精準找到該條列表數據。當state更新時，新的狀態值和舊的狀態值對比，較快地定位到diff。
3、細分vue組件
把組件細分，比如一個組件，可以把整個組件細分成輪播組件、列表組件、分頁組件等。
4、減少watch的數據
在使用watch監聽相應的數據變更並綁定事件，當watch的數據比較小，性能消耗不明顯。當數據變大，系統會出現卡頓，所以減少watch的數據。其它不同的組件的state雙向綁定，可以採用事件中央總線或者vuex進行數據的變更操作。
5、內容類系統的圖片資源按需加載
對於內容類系統的圖片按需加載，如果出現圖片加載比較多，可以先使用v-lazy之類的懶加載庫或者綁定鼠標的scroll事件，滾動到可視區域先再對數據進行加載顯示，減少系統加載的數據。