Vue項目優化指南

1.對路由組件進行懶加載

在路由配置文件裏，這裏是router.js裏面引用組件。若是使用同步的方式加載組件，在首屏加載時會對網絡資源加載加載比較多，資源比較大，加載速度比較慢。因此設置路由懶加載，按需加載會加速首屏渲染。在沒有對路由進行懶加載時，在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請求。若是項目比較大，須要注意懶加載的效果。

2.源碼優化

• v-if 和 v-show選擇調用
  • v-show和v-if的區別是：v-if是懶加載，當狀態爲true時纔會加載，而且爲false時不會佔用佈局空間；v-show是不管狀態是true或者是false，都會進行渲染，並對佈局佔據空間對於在項目中，須要頻繁調用，不須要權限的顯示隱藏，能夠選擇使用v-show，能夠減小系統的切換開銷。
• 爲item設置惟一key值，
  • 在列表數據進行遍歷渲染時，須要爲每一項item設置惟一key值，方便vuejs內部機制精準找到該條列表數據。當state更新時，新的狀態值和舊的狀態值對比，較快地定位到diff。
• 細分vuejs組件
  • 在項目開發過程之中，初版本把全部的組件的佈局寫在一個組件中，當數據變動時，因爲組件代碼比較龐大，vuejs的數據驅動視圖更新比較慢，形成渲染比較慢。形成比較差的體驗效果。因此把組件細分，好比一個組件，能夠把整個組件細分紅輪播組件、列表組件、分頁組件等。
• 減小watch的數據
  • 當組件某個數據變動後須要對應的state進行變動，就須要對另外的組件進行state進行變動。可使用watch監聽相應的數據變動並綁定事件。當watch的數據比較小，性能消耗不明顯。當數據變大，系統會出現卡頓，因此減小watch的數據。其它不一樣的組件的state雙向綁定，能夠採用事件中央總線或者vuex進行數據的變動操做。
• 內容類系統的圖片資源按需加載
  • 對於內容類系統的圖片按需加載，若是出現圖片加載比較多，能夠先使用v-lazy之類的懶加載庫或者綁定鼠標的scroll事件，滾動到可視區域先再對數據進行加載顯示，減小系統加載的數據。
• SSR(服務端渲染)
  • 若是項目比較大，首屏不管怎麼作優化，都出現閃屏或者一陣黑屏的狀況。能夠考慮使用SSR(服務端渲染)，vuejs官方文檔提供next.js很好的服務端解決方案，可是侷限性就是目前僅支持Koa、express等Nodejs的後臺框架，須要webpack支持。目前本身瞭解的就是後端支持方面，vuejs的後端渲染支持php，其它的不太清楚。

3.用戶體驗優化

• better-click防止iphone點擊延遲
  • 在開發移動端vuejs項目時，手指觸摸時會出現300ms的延遲效果，能夠採用better-click對ipone系列的兼容體驗優化。
• 菊花loading
  • 菊花loading，在加載資源過程之中，能夠提供loading。此菊花loading不是那菊花。因此能夠自由選擇本身喜歡的菊花。

      骨架屏加載

             在首屏加載資源較多，可能會出現白屏和閃屏的狀況。體驗很差。盜圖一波，小米商城使用骨架屏進行首屏在資源數據尚未加載完成時顯示，給很好的體驗效果。

4.代碼包優化

屏蔽sourceMap

• 待下項目開發完成。進行打包源碼上線環節，須要對項目開發環節的開發提示信息以及錯誤信息進行屏蔽，一方面能夠減小上線代碼包的大小；另外一方面提升系統的安全性。在vuejs項目的config目錄下有三個文件dev.env.js(開發環境配置文件)、prod.env.js(上線配置文件)、index.js(通用配置文件)。vue-cli腳手架在上線配置文件會自動設置容許sourceMap打包，因此在上線前能夠屏蔽sourceMap。以下所示，index.js的配置以下,通用配置文件分別對開發環境和上線環境作了打包配置分類，在build對象中的配置信息中，productionSourceMap修改爲false:

 1 'use strict'
 2 // Template version: 1.3.1
 3 // see http://vuejs-templates.github.io/webpack for documentation.
 4 
 5 const path = require('path')
 6 
 7 module.exports = {
 8   dev: {
 9 
10     // Paths
11     assetsSubDirectory: 'static',
12     assetsPublicPath: '/',
13     proxyTable: {},
14 
15     // Various Dev Server settings
16     host: 'localhost', // can be overwritten by process.env.HOST
17     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18     autoOpenBrowser: false,
19     errorOverlay: true,
20     notifyOnErrors: true,
21     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 
23     
24     /**
25      * Source Maps
26      */
27 
28     // https://webpack.js.org/configuration/devtool/#development
29     devtool: 'cheap-module-eval-source-map',
30 
31     // If you have problems debugging vue-files in devtools,
32     // set this to false - it *may* help
33     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34     cacheBusting: true,
35 
36     cssSourceMap: true
37   },
38 
39   build: {
40     // Template for index.html
41     index: path.resolve(__dirname, '../dist/ndindex.html'),
42 
43     // Paths
44     assetsRoot: path.resolve(__dirname, '../dist'),
45     assetsSubDirectory: 'static',
46     assetsPublicPath: './',
47 
48     /**
49      * Source Maps
50      */
51 
52     productionSourceMap: false,
53     // https://webpack.js.org/configuration/devtool/#production
54     devtool: '#source-map',
55 
56     // Gzip off by default as many popular static hosts such as
57     // Surge or Netlify already gzip all static assets for you.
58     // Before setting to `true`, make sure to:
59     // npm install --save-dev compression-webpack-plugin
60     productionGzip: true,
61     productionGzipExtensions: ['js', 'css','svg'],
62 
63     // Run the build command with an extra argument to
64     // View the bundle analyzer report after build finishes:
65     // `npm run build --report`
66     // Set to `true` or `false` to always turn it on or off
67     bundleAnalyzerReport: process.env.npm_config_report
68   }
69 }

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

• 在vue-cli腳手架的配置信息中，有對代碼進行壓縮的配置項，例如index.js的通用配置，productionGzip設置爲true，可是首先須要對compress-webpack-plugin支持，因此須要經過 npm install --save-dev compression-webpack-plugin(若是npm install出錯了，就使用cnpm install安裝。可能網絡比較差npm install會出現頻率比較大)，gzip會對js、css文件進行壓縮處理；對於圖片進行壓縮問題，對於png，jpg，jpeg沒有壓縮效果，對於svg，ico文件以及bmp文件壓縮效果達到50%，在productionGzipExtensions: ['js', 'css','svg']設置須要進行壓縮的什麼格式的文件。對項目文件進行壓縮以後，須要瀏覽器客戶端支持gzip以及後端支持gzip。下面能夠查當作功支持gzip狀態：

 1 'use strict'
 2 // Template version: 1.3.1
 3 // see http://vuejs-templates.github.io/webpack for documentation.
 4 const path = require('path')
 5 module.exports = {
 6   build: {
 7     // Template for index.html
 8     index: path.resolve(__dirname, '../dist/ndindex.html'),
 9 
10     // Paths
11     assetsRoot: path.resolve(__dirname, '../dist'),
12     assetsSubDirectory: 'static',
13     assetsPublicPath: './',
14 
15     /**
16      * Source Maps
17      */
18 
19     productionSourceMap: false,
20     // https://webpack.js.org/configuration/devtool/#production
21     devtool: '#source-map',
22 
23     // Gzip off by default as many popular static hosts such as
24     // Surge or Netlify already gzip all static assets for you.
25     // Before setting to `true`, make sure to:
26     // npm install --save-dev compression-webpack-plugin
27     productionGzip: true,
28     productionGzipExtensions: ['js', 'css','svg'],
29 
30     // Run the build command with an extra argument to
31     // View the bundle analyzer report after build finishes:
32     // `npm run build --report`
33     // Set to `true` or `false` to always turn it on or off
34     bundleAnalyzerReport: process.env.npm_config_report
35   }
36 }