vue項(xiàng)目的性能優(yōu)化方法

這篇文章主要介紹“vue項(xiàng)目的性能優(yōu)化方法”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“vue項(xiàng)目的性能優(yōu)化方法”文章能幫助大家解決問題。

gzip壓縮

在所有的web前臺項(xiàng)目，靜態(tài)資源基本都放在cdn上，gzip的壓縮是非常必要的，它直接改變了js文件的大小，減少兩到三倍。

參考加速nginx: 開啟gzip和緩存，nginx的gzip配置非常簡單，在你對應(yīng)的域名底下，增加下面的配置，重啟服務(wù)就可。gzip_comp_level的值大于2的時(shí)候并不顯著，建議設(shè)置在1或者者2之間。

# 開啟gzipgzip on;# 啟用gzip壓縮的最小文件，小于設(shè)置值的文件將不會壓縮gzip_min_length 1k;# gzip 壓縮級別，1-10，數(shù)字越大壓縮的越好，也越占用CPU時(shí)間，后面會有詳細(xì)說明gzip_comp_level 2;# 進(jìn)行壓縮的文件類型。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 gzipgzip_disable "MSIE [1-6]\.";

服務(wù)器緩存

為了提高服務(wù)器獲取數(shù)據(jù)的速度，nginx緩存著靜態(tài)資源是非常必要的。假如是測試服務(wù)器對html應(yīng)該不設(shè)置緩存，而js等靜態(tài)資源環(huán)境由于文件尾部會加上一個(gè)hash值，這可以有效實(shí)現(xiàn)緩存的控制。

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是一個(gè)專門針對http的頭文件，可以向?yàn)g覽器傳回少量有用的信息。與之對應(yīng)的content，是各個(gè)參數(shù)的變量值。

HTTP 1.0

在HTTP1.0中通過Pragma控制頁面緩存，可以設(shè)置為Pragma或者no-cache。在不讓瀏覽器或者中間緩存服務(wù)器緩存頁面的情況下，通常設(shè)置的值為no-cache，不過這個(gè)值不這么保險(xiǎn)，通常還加上Expires置為0來達(dá)到目的。Expires可以用于設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期，必需到服務(wù)器上重新傳輸獲取新的頁面信息。PS：內(nèi)容必需使用GMT的時(shí)間格式。

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

HTTP 1.1

在HTTP1.1中通過Cache-Control控制頁面緩存，可以設(shè)置為no-cache、private、no-store、max-age或者must-revalidate等，默認(rèn)為private。

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

• public 瀏覽器和緩存服務(wù)器都可以緩存頁面信息

• private 對于單個(gè)客戶的整個(gè)或者部分響應(yīng)消息，不能被共享緩存解決。這允許服務(wù)器僅僅形容當(dāng)客戶的部分響應(yīng)消息，此響應(yīng)消息對于其余客戶的請求無效

• no-cache 瀏覽器和緩存服務(wù)器都不應(yīng)該緩存頁面信息

• no-store 請求和響應(yīng)的信息都不應(yīng)該被存儲在對方的磁盤系統(tǒng)中，不使用緩存

• must-revalidate 對于用戶機(jī)的每次請求，代理商服務(wù)器必需想服務(wù)器驗(yàn)證緩存能否過時(shí)

• max-age 用戶機(jī)可以接收生存期不大于指定時(shí)間（以秒為單位）的響應(yīng)

• min-fresh 用戶機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)

Last-Modified和Etags

Last-Modified服務(wù)器端文件響應(yīng)頭，形容最后修改時(shí)間。當(dāng)瀏覽器再次進(jìn)行請求時(shí)，會向服務(wù)器傳送If-Modified-Since報(bào)頭，訊問時(shí)間點(diǎn)之后資源能否被修改過，從而區(qū)分200和304的請求狀態(tài)碼，304則選擇瀏覽器緩存。

Etags不同的是，ETag是根據(jù)實(shí)體內(nèi)容生成一段hash字符串，是標(biāo)識資源的狀態(tài)。它由服務(wù)端產(chǎn)生來判斷文件能否有升級。

參考資料：

• HTTP緩存深入實(shí)踐

• 掌握緩存，不再讓你藍(lán)瘦香菇

JS分包

前面說的兩部分都可以說是偏后臺的活，假如真的從前臺方面考慮，我們可能會分包入手。正由于vue的腳手架搭建的項(xiàng)目，webpack的配置當(dāng)中就包含了壓縮js，css和html的壓縮。所以，當(dāng)我們的單頁面越做越大的情況下，首要的一步就是分包。

vue官方稱gzip壓縮后只有20kb，但是你普通的打包方式也有100kb，再加上你自己的邏輯代碼，整體包的體積也挺大的。直接影響首屏頁面加載的效率。下面詳情一下兩種分包的方法：

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

• dll 打包

vue，vuex和vue-router

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

最后當(dāng)然需要在html標(biāo)簽上增加上額外cdn的link或者者script。

DLL打包

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

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

預(yù)加載

預(yù)加載技術(shù)（prefetch）是在客戶需要前我們就將所需的資源加載完畢，不是所有瀏覽器都支持，主要是Chrome瀏覽器。

DNS prefetch 分析這個(gè)頁面需要的資源所在的域名，瀏覽器空閑時(shí)提前將這些域名轉(zhuǎn)化為 IP 地址，真正請求資源時(shí)就避免了上述這個(gè)過程的時(shí)間。----HTML5 prefetch

因?yàn)橛蛎D(zhuǎn)換成為IP的過程是非常耗時(shí)的一個(gè)過程，DNS prefetch可以減少這部分的時(shí)間。

<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'>

預(yù)加載也可以對某個(gè)靜態(tài)資源起到專門的作用。

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

預(yù)渲染（pre-rendering）是這個(gè)頁面會提前加載好客戶即將訪問的下一個(gè)頁面。

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

vue組件keep-alive

假如你做用一個(gè)大型web的spa的時(shí)候，你有很多router，對應(yīng)的是很多個(gè)頁面。在頁面的快速切換中，為了保證頁面加載的效率，除了緩存機(jī)制之外，vue的keep-alive組件可以幫的上忙。

它會把組件保存在瀏覽器內(nèi)存當(dāng)中，方便你快速切換。

百度的lavas項(xiàng)目中就在vue-router當(dāng)中使用keep-alive的組件，用它包裹著router-view。使用了keep-alive的組件內(nèi)的數(shù)據(jù)將會保留，“能否需要重新同步數(shù)據(jù)”可以在vue-router的鉤子中路由所帶的參數(shù)執(zhí)行判斷。

Promise請求

es6的其中一個(gè)特性就是原生支持promise。在這里，我先不說異步編程里的generator和aync/await的屬性。它們功能的實(shí)現(xiàn)都是基于promise。

Promise的特點(diǎn)在于：

• 減少回調(diào)函數(shù)

• 串并行解決

• 代碼的優(yōu)雅

這里特別講一下，ES6在性能優(yōu)化上可以使用promise或者者async／await去壓縮請求時(shí)間。在過去，很多jquery的頁面在調(diào)用接口請求都是一個(gè)接口等另一個(gè)接口，串行執(zhí)行所有請求，最后在完成最后的回調(diào)函數(shù)，如此類推。這樣的寫法會直接導(dǎo)致“回調(diào)地獄”。即便你用vue-resource，我也review到非常多的“回調(diào)地獄”的情況。為了從根本上處理這個(gè)問題并提高開發(fā)效率，我建議優(yōu)先使用promise。（async／await不急著投入使用），考慮到還有很多同事還在高效地開發(fā)業(yè)務(wù)代碼。

現(xiàn)在的vue-resource已經(jīng)支持promise的寫法，為了更好地讓技術(shù)向后發(fā)展，我建議將pagekit/vue-resource替換稱為mzabriskie/axios和webmodules/jsonp。axios是可以同時(shí)滿足服務(wù)端和瀏覽器端，同構(gòu)的寫法有助于以后將技術(shù)棧往SSR（服務(wù)端渲染）發(fā)展。jsonp這個(gè)庫則是為了兼容jsonp的請求需要，需要對它進(jìn)行了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});

盡量使用鏈?zhǔn)綄懛ǎ?/p>

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

并行的操作主要是Promise.all()，它可以將Promise操作的數(shù)組并行執(zhí)行完成而后在進(jìn)行串行的操作。Promise.race()則是返回并行請求中最先返回的請求的那個(gè)結(jié)果。它們的使用可以有效地壓縮數(shù)據(jù)獲取的時(shí)間。

關(guān)于“vue項(xiàng)目的性能優(yōu)化方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。