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的配置，詳見：http://www.javashuo.com/article/p-cdijowad-mh.html

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