vue項目性能優化，優化項目加載慢的問題

一. 對路由組件進行懶加載：

如果使用同步的方式加載組件，在首屏加載時會對網絡資源加載加載比較多，資源比較大，加載速度比較慢。所以設置路由懶加載，按需加載會加速首屏渲染。在沒有對路由進行懶加載時，在Chrome里devtool查閱可以看到首屏網絡資源加載情況（6requests 3.8MB transfferred Finish:4.67s DOMContentLoaded 2.61s Load 2.70s）。在對路由進行懶加載之后（7requests 800kb transffered Finish2.67s DOMContentLoaded 1.72s Load 800ms）,可以看見加載速度明顯加快。但是進行懶加載之后，實現按需加載，那么項目打包不會把所有js打包進app.[hash].js里面，優點是可以減少app.[hash].js體積，缺點就是會把其它js分開打包，造成多個js文件，會有多次https請求。如果項目比較大，需要注意懶加載的效果。

import Vue from 'vue'
import Router from 'vue-router'

import api from "./api/index";
// views..
const mall = resolve => require(["./mall"], resolve)
const mallList = resolve => require(['./views/mallList'], resolve)
const goodDetail = resolve => require(['./views/goodDetail'], resolve)
const payStatus = resolve => require(['./views/payStatus'], resolve)
......

按需加載之后，除了公共文件，會把每個頁面獨有的樣式和腳本都打包成一個單獨的文件，這樣除了公共文件外，訪問一個頁面只會加載該頁面所需要的文件即可，這會大大減少首屏頁面的壓力。

二. 合理使用vue的指令：

1. v-if 和 v-show ：

v-if 是懶加載，當狀態為true時才會加載，並且為 false 時不會占用布局空間；

v-show 是無論狀態是 true 或者是 false，都會進行渲染，並對布局占據空間對於在項目中，需要頻繁調用，不需要權限的顯示隱藏，可以選擇使用 v-show，可以減少系統的切換開銷。

你可以這樣理解—— v-if 是外賣小哥的上班方式，有單就接，每單歇着，比較靈活自由；v-show 是飯堂員工的上班方式，無論是大廚，保潔，收銀還是服務員只要上班了就需要各忙各的，即使沒事做也得候着。

2. 為item設置唯一key值：

在列表數據進行遍歷渲染時，需要為每一項item設置唯一key值，方便vuejs內部機制精准找到該條列表數據。當state更新時，新的狀態值和舊的狀態值對比，較快地定位到diff。

3. 細分vuejs組件:

在項目開發過程之中，第一版本把所有的組件的布局寫在一個組件中，當數據變更時，由於組件代碼比較龐大，vuejs的數據驅動視圖更新比較慢，造成渲染比較慢。造成比較差的體驗效果。所以把組件細分，比如一個組件，可以把整個組件細分成輪播組件、列表組件、分頁組件等。

4. 減少watch的數據:

當組件某個數據變更后需要對應的state進行變更，就需要對另外的組件進行state進行變更。可以使用watch監聽相應的數據變更並綁定事件。當watch的數據比較小，性能消耗不明顯。當數據變大，系統會出現卡頓，所以減少watch的數據。其它不同的組件的state雙向綁定，可以采用事件中央總線或者vuex進行數據的變更操作。

5. 內容類系統的圖片資源按需加載:

對於內容類系統的圖片按需加載，如果出現圖片加載比較多，可以先使用v-lazy之類的懶加載庫或者綁定鼠標的scroll事件，滾動到可視區域先再對數據進行加載顯示，減少系統加載的數據。

import VueLazyload from '../static/js/lazyload'
......
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(VueLazyload, { error: './static/img/blank.png',
    loading: './static/img/blank.png',
})

6. SSR(服務端渲染):

如果項目比較大，首屏無論怎么做優化，都出現閃屏或者一陣黑屏的情況。可以考慮使用SSR(服務端渲染)，vuejs官方文檔提供next.js很好的服務端解決方案，但是局限性就是目前僅支持Koa、express等Nodejs的后台框架，需要webpack支持。目前自己了解的就是后端支持方面，vuejs的后端渲染支持php，其它的不太清楚。

三. 代碼包優化

1. 屏蔽SourceMap:

vue-cli腳手架在上線配置文件會自動設置允許 sourceMap 打包，這方便我們再開發階段進行調試。但是在開發完成上線打包的時候，就要關閉這個開關，一方面能減少代碼包的大小，另一方面也有利於系統安全。

如下所示，在 config ==> index.js 文件中，在 build 對象中的配置信息中，productionSourceMap 修改成 False：

......
module.exports = { ...... build: { ...... /** * Source Maps */ productionSourceMap: False, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', ...... } }

2. 對項目代碼中的JS/CSS/SVG(*.ico)文件進行gzip壓縮

gzip會對js、css文件進行壓縮處理（壓縮效果比較明顯，能壓縮至原來的1/3左右）；對於圖片進行壓縮問題，對於png，jpg，jpeg沒有壓縮效果，對於svg，ico文件以及bmp文件壓縮效果達到50%，在productionGzipExtensions: ['js', 'css','svg']設置需要進行壓縮的什么格式的文件。

如下所示，在 config ==> index.js 文件中，在 build 對象中的配置信息中，productionGzip 設置為 True 就可以了：

 ......
  build: {
     ......
    /**
     * Source Maps
     */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production

    devtool: '#source-map',
 productionGzip: true, productionGzipExtensions: ['js', 'css'], ...... } }

其中，關於 gzip 壓縮的配置是在 vue-cli 腳手架的 build - webpack.prod.conf.js 配置文件中，有對代碼進行壓縮的配置項，這個一般不需要修改的。如下：

......
if (config.build.productionGzip) { const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push( new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + ')$' ), threshold: 10240, minRatio: 0.8 }) ) } ......

當然，這只是開啟了gzip壓縮開關，還需要安裝 compress-webpack-plugin 插件進行支持 ：

npm install --save-dev compression-webpack-plugin

在安裝gzip支持的插件的時候，出現了 Compression Plugin Invalid Options 的問題，如下圖：

這是由於插件版本的問題，把json文件中的版本換成1.1.11就可以了，如圖：

然后重新npm install就可以了，安裝完成之后，npm run build，就能打包成功了。至於為什么現在的"compression-webpack-plugin": "^2.0.0"這個版本無法正常安裝，有興趣的小伙伴可以去研究下。

打包之后，看下js和css文件夾中，能看到.gz格式的文件，就說明前端配置OK了：

可以看到，壓縮效果還是比較明顯的。

對項目文件進行壓縮之后，還需要瀏覽器客戶端以及后端支持gzip，目前大部分主流瀏覽器客戶端都是支持gzip的，就算小部分非主流瀏覽器不支持也不用擔心，不支持gzip格式文件的會默認訪問源文件的。

對於后端對gzip的支持，這里以nginx為例說明：

http { 
   gzip on;
   gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 8; #壓縮級別 gzip_buffers 16 8k; #gzip_http_version 1.1; gzip_min_length 100; #不壓縮臨界值 gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; }

對於nginx的配置，詳見：https://segmentfault.com/a/1190000012571492#articleHeader7

目前前端已經完成gzip的改造，上邊配置代碼也給了后端進行配置，但是上線之后並沒有什么改變，打包壓縮的gz文件並沒有被調用，應該是后端配置的問題了，這個就等后端再研究下了。。。