Vue項目的性能優化之路

轉載自 https://www.jianshu.com/p/40b04701c571

Vue筆記六：Vue項目的性能優化之路

「你說一下性能優化的手段」。百分之八十的人都會說，壓縮js和css之類的。顯然這些都是必須作的，並且已經根本不是主要的性能優化的關鍵點。若是你只會說這些，只能說明你是個過期的前端工程師。

性能優化過程當中，咱們須要面對的更可能是DMS解析過程，服務器緩存和瀏覽器緩存機制。

gzip壓縮

在全部的web前端項目，靜態資源基本都放在cdn上，gzip的壓縮是很是必要的，它直接改變了js文件的大小，減小兩到三倍。

參考加速nginx: 開啓gzip和緩存，nginx的gzip配置很是簡單，在你對應的域名底下，添加下面的配置，重啓服務便可。gzip_comp_level的值大於2的時候並不明顯，建議設置在1或者2之間。

# 開啓gzip gzip on; # 啓用gzip壓縮的最小文件，小於設置值的文件將不會壓縮 gzip_min_length 1k; # gzip 壓縮級別，1-10，數字越大壓縮的越好，也越佔用CPU時間，後面會有詳細說明 gzip_comp_level 2; # 進行壓縮的文件類型。javascript有多種形式。其中的值能夠在 mime.types 文件中找到。 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; # 是否在http header中添加Vary: Accept-Encoding，建議開啓 gzip_vary on; # 禁用IE 6 gzip gzip_disable "MSIE [1-6]\."; 

服務器緩存

爲了提升服務器獲取數據的速度，nginx緩存着靜態資源是很是必要的。若是是測試服務器對html應該不設置緩存，而js等靜態資源環境由於文件尾部會加上一個hash值，這能夠有效實現緩存的控制。

location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
  access_log   off; 
  expires      30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
  access_log   off;
  expires      24h;
}
location ~* ^.+\.(html|htm)$ {
  expires      1h;
}

瀏覽器緩存

瀏覽器緩存是經過html的頭文件中的meta來控制。http-equiv是一個專門針對http的頭文件，能夠向瀏覽器傳回一些有用的信息。與之對應的content，是各個參數的變量值。

HTTP 1.0

在HTTP1.0中經過Pragma控制頁面緩存，能夠設置爲Pragma或no-cache。在不讓瀏覽器或中間緩存服務器緩存頁面的狀況下，一般設置的值爲no-cache，不過這個值不這麼保險，一般還加上Expires置爲0來達到目的。Expires能夠用於設定網頁的到期時間。一旦網頁過時，必須到服務器上從新傳輸獲取新的頁面信息。PS：內容必須使用GMT的時間格式。

<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> 

HTTP 1.1

在HTTP1.1中經過Cache-Control控制頁面緩存，能夠設置爲no-cache、private、no-store、max-age或must-revalidate等，默認爲private。

<meta http-equiv="Cache-Control" content="no-cache"> 

• public 瀏覽器和緩存服務器均可以緩存頁面信息
• private 對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這容許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其餘用戶的請求無效
• no-cache 瀏覽器和緩存服務器都不該該緩存頁面信息
• no-store 請求和響應的信息都不該該被存儲在對方的磁盤系統中，不使用緩存
• must-revalidate 對於客戶機的每次請求，代理服務器必須想服務器驗證緩存是否過期
• max-age 客戶機能夠接收生存期不大於指定時間（以秒爲單位）的響應
• min-fresh 客戶機能夠接收響應時間小於當前時間加上指定時間的響應

Last-Modified和Etags

Last-Modified服務器端文件響應頭，描述最後修改時間。當瀏覽器再次進行請求時，會向服務器傳送If-Modified-Since報頭，詢問時間點以後資源是否被修改過，從而區分200和304的請求狀態碼，304則選擇瀏覽器緩存。

Etags不一樣的是，ETag是根據實體內容生成一段hash字符串，是標識資源的狀態。它由服務端產生來判斷文件是否有更新。

參考資料：

• HTTP緩存深刻實踐
• 掌握緩存，再也不讓你藍瘦香菇

JS分包

前面說的兩部分均可以說是偏後端的活，若是真的從前端方面考慮，咱們可能會分包入手。正由於vue的腳手架搭建的項目，webpack的配置當中就包含了壓縮js，css和html的壓縮。因此，當咱們的單頁面越作越大的狀況下，首要的一步就是分包。

vue官方稱gzip壓縮後只有20kb，可是你普通的打包方式也有100kb，再加上你本身的邏輯代碼，總體包的體積也挺大的。直接影響首屏頁面加載的效率。下面介紹一下兩種分包的方法：

• external 把包排除，使用cdn資源
• dll 打包

vue，vuex和vue-router

在webpack配置文件中external設置，把這三個場用包排除這個操做，主要是把這三個包從vendor.js分開。

最後固然須要在html標籤上添加上額外cdn的link或者script。

DLL打包

這種打包方式專門引用webpack官方的DllPlugin和DllReferencePlugin。DllPlugin會生成一個dll包的代碼指紋manifest，管理額外的打包。而在項目生成的過程當中，DllReferencePlugin會參考manifest的內容去打包。額外生成的js文件應該被放置在vue項目的文件當中的static文件夾底下，以便於代碼部署。

參考PaicFE／vue-multi中的配置文件webpack.dll.config.js的寫法。

預加載

預加載技術（prefetch）是在用戶須要前咱們就將所需的資源加載完畢，不是全部瀏覽器都支持，主要是Chrome瀏覽器。

DNS prefetch 分析這個頁面須要的資源所在的域名，瀏覽器空閒時提早將這些域名轉化爲 IP 地址，真正請求資源時就避免了上述這個過程的時間。----HTML5 prefetch

因爲域名轉換成爲IP的過程是很是耗時的一個過程，DNS prefetch能夠減小這部分的時間。

<meta http-equiv='x-dns-prefetch-control' content='on'> <link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://completion.amazon.com'> <link rel='dns-prefetch' href='http://fls-na.amazon.com'> 

預加載也能夠對某個靜態資源起到專門的做用。

<link rel='subresource' href='libs.js'> 

預渲染（pre-rendering）是這個頁面會提早加載好用戶即將訪問的下一個頁面。

<link rel='prerender' href='http://www.pagetoprerender.com'> 

vue組件keep-alive

若是你作用一個大型web的spa的時候，你有不少router，對應的是不少個頁面。在頁面的快速切換中，爲了保證頁面加載的效率，除了緩存機制以外，vue的keep-alive組件能夠幫的上忙。

它會把組件保存在瀏覽器內存當中，方便你快速切換。

百度的lavas項目中就在vue-router當中使用keep-alive的組件，用它包裹着router-view。使用了keep-alive的組件內的數據將會保留，「是否須要從新同步數據」能夠在vue-router的鉤子中路由所帶的參數執行判斷。

Promise請求

es6的其中一個特性就是原生支持promise。在這裏，我先不說異步編程裏的generator和aync/await的屬性。它們功能的實現都是基於promise。

Promise的特色在於：

• 減小回調函數
• 串並行處理
• 代碼的優雅

這裏特別講一下，ES6在性能優化上可使用promise或者async／await去壓縮請求時間。在過去，不少jquery的頁面在調用接口請求都是一個接口等另外一個接口，串行執行全部請求，最後在完成最後的回調函數，如此類推。這樣的寫法會直接致使「回調地獄」。即便你用vue-resource，我也review到很是多的「回調地獄」的狀況。爲了從根本上解決這個問題並提升開發效率，我建議優先使用promise。（async／await不急着投入使用），考慮到還有不少同事還在高效地開發業務代碼。

如今的vue-resource已經支持promise的寫法，爲了更好地讓技術向後發展，我建議將pagekit/vue-resource替換稱爲mzabriskie/axios和webmodules/jsonp。axios是能夠同時知足服務端和瀏覽器端，同構的寫法有助於之後將技術棧往SSR（服務端渲染）發展。jsonp這個庫則是爲了兼容jsonp的請求須要，須要對它進行了promise的封裝。

export function getJsonp(urlHost, key, data, _params) { return new Promise((resolve, reject) => { let url = urlHost + key; if (data) url += `?${querystring.stringify({ ...data, temp: new Date().getTime() })}`; const params = _params || { timeout: 15000 }; if (!params.timeout) params.timeout = 15000; jsonp(url, params, (err, res) => { if (err) { reject(err); } else { resolve(res); } }); }); } 

Promise的使用須要避免如下的寫法，

promise.then(function(value) { // success }, function(error) { // failure }); 

儘可能使用鏈式寫法，

promise.then(function(value) { // step1 }).then(function(value){ // step2 }).catch(function(value){ // failure }) 

並行的操做主要是Promise.all()，它能夠將Promise操做的數組並行執行完成而後在進行串行的操做。Promise.race()則是返回並行請求中最早返回的請求的那個結果。它們的使用能夠有效地壓縮數據獲取的時間。

擴展閱讀

• html的meta總結，html標籤中meta屬性使用介紹
• 使用 webpack 3 構建高性能的應用程序

做者：brandonxiang 連接：https://www.jianshu.com/p/40b04701c571