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字符串，是標識資源的狀態。它由服務端產生來判斷文件是否有更新。
參考資料：
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' >
<link rel='dns-prefetch' >
<link rel='dns-prefetch' >
<link rel='dns-prefetch' >
<link rel='dns-prefetch' >
預加載也可以對某個靜態資源起到專門的作用。
<link rel='subresource' href='libs.js'>
預渲染（pre-rendering）是這個頁面會提前加載好用戶即將訪問的下一個頁面。
<link rel='prerender' >
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()則是返回并行請求中最先返回的請求的那個結果。它們的使用可以有效地壓縮數據獲取的時間。
擴展閱讀
轉載，請表明出處。總目錄前段收集器
