vue項目的性能優化方法

這篇文章主要介紹“vue項目的性能優化方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue項目的性能優化方法”文章能幫助大家解決問題。

gzip壓縮

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

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

# 開啟gzipgzip 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 gzipgzip_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()則是返回并行請求中最先返回的請求的那個結果。它們的使用可以有效地壓縮數據獲取的時間。

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