前言

使用vue、react、angular等技術開發程序中，我們都會遇到以下問題：

1. 首屏加載慢
2. 每一次更新都需要清除瀏覽器快取才能看到效果(經常被測驗吐槽)

這兩個問題可以從很多方面進行優化，今天我就從前端頁面部署階段來優化一下這兩個問題，PS：以下內容都基于vue-cli3+，
         3.光理論是不夠的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

前端頁面檔案快取方案

從vue-cli3打包說起

路由使用按需加載后，打包生成的檔案，每一個路由頁面都對應一個js和css檔案，入口main.js及其依賴則打包成了app.js和app.css，公共依賴都放到了chunk-vendors.js，

vue-cli3打包后的dist/js檔案夾：

可以看到，打包生成的js/css/img等檔案的檔案名都帶有hash值，當源檔案內容改變時，重新打包后對應的檔案hash值也會改變，舉個栗子，我們修改了about.vue中js的內容，重新打包時about.js的hash值會改變，以及依賴about.vue的檔案app.js的hash值也會改變，而其他沒有修改的檔案，打包后的hash值都不會改變，

我們知道，檔案名帶hash是為了消除快取帶來的影響的，但是所有檔案都不快取肯定不是一個很好的解決方案，

vue-cli3打包生成的檔案名帶hash值的作用

為了快取的最優體驗

我們先來簡單回顧下http快取的知識(參考MDN)：

1. HTTP1.0 是通過Expires（檔案過期時間）和Last-Modified（最近修改時間）來告訴瀏覽器進行快取的，這兩個欄位都是 UTC 時間（絕對時間），Expires 過期控制不穩定，因為瀏覽器端可以隨意修改本地時間，導致快取使用不精準，而且 Last-Modified 過期時間只能精確到秒，
2. HTTP1.1 通過Cache-Contorl和 Etag（版本號）進行快取控制，瀏覽器先檢查 Cache-Control，如果有，則以 Cache-Control 為準，忽略 Expires，如果沒有 Cache-Control，則以 Expires 為準，

Cache-Control 除了可以設定 max-age（相對過期時間，以秒為單位）以外，還可以設定如下幾種常用值:

• public，資源允許被中間服務器快取，瀏覽器請求服務器時，如果快取時間沒到，中間服務器直接回傳給瀏覽器內容，而不必請求源服務器，
• private，資源不允許被中間代理服務器快取，瀏覽器請求服務器時，中間服務器都要把瀏覽器的請求透傳給服務器，
• no-cache，不管本地副本是否過期，每次訪問資源，瀏覽器都要向服務器詢問，如果檔案沒變化，服務器只告訴瀏覽器繼續使用快取（304），
• no-store，瀏覽器和中間代理服務器都不能快取資源，每次訪問資源，瀏覽器都必須請求服務器，并且，服務器不去檢查檔案是否變化，而是直接回傳完整的資源，
• must-revalidate，本地副本過期前，可以使用本地副本；本地副本一旦過期，必須去源服務器進行有效性校驗，
• proxy-revalidate，要求代理服務器針對快取資源向源服務器進行確認，
• s-maxage：快取服務器對資源快取的最大時間，

現在99%的瀏覽器都是HTTP1.1及以上版本，我們配置快取就使用Cache-Contorl和Etag配合就好了，

那么問題來了，檢查檔案是否最新不是用etag嗎，為什么檔案名還需要有hash值？

（1）如果檔案名不帶hash值，檔案版本得用etag來標記，瀏覽器需要先去檢查下是否過期，服務器則需要檢查檔案是否最新，

（2）而檔案名帶有hash值，可以直接將檔案的過期時間設定為1年，瀏覽器就不用檢查是否過期，直接使用，

原因是，如果頁面源檔案有修改，生成的js/css的hash值就會修改，對應的請求js/css地址也會變化，htpp地址改了，也就不用檢查是否過期，沒修改的檔案的hash則不變，可以使用快取檔案，

所以利用檔案名帶hash來做快取，即能保證，頁面有修改瀏覽器能請求到最新的檔案，又能節省服務器的請求（檢查是否過期的請求），

實作無感知發版

只有一臺服務器的情況下，我們的頁面檔案需要更新，通常操作是：先刪掉舊檔案，然后上傳新檔案，這段時間系統將不可用，對用戶有一定的影響，

僅更新前端頁面的前提下，檔案名帶有hash值還可以實作用戶無感知發版：系統更新時，只需要將打包之后的檔案除index.html以外的檔案（js/css/img），全部上傳到服務器網站目錄，未修改檔案（即重名檔案）直接跳過，有修改的檔案由于檔案的hash值不同會被上傳，上傳完畢我們再將index.html覆寫掉舊版就行，這段時間用戶已請求舊版本index.html的無影響（不會出現檔案404，因為新舊版本js/css同時存在），而新訪問用戶則請求的是新版index.html，訪問舊頁面用戶重繪也會請求新版檔案，并且無快取影響，即對用戶使用0影響，一段時間之后，我們只需要按檔案生成時間對比一下洗掉舊檔案即可，PS：替換前端檔案不需要重啟服務器，

總結： 凡是檔案名帶有hash值的的檔案都可以設定為“永久快取”（一年），其他不帶hash的檔案使用etag來設定快取，由Nginx判斷是否過期，

優化打包結果

頁面部署的時候，有個問題，如何區分檔案名是否帶有hash值呢？正則匹配顯然不是很好的辦法，其實辦法很簡單，打包生成的檔案都帶有hash值，而public目錄里面的檔案不會經過打包處理，所以只需要將public目錄里面的檔案除了index.html全部放到一個static目錄（注意引入路徑）

那么打包后的檔案目錄就會變成這樣：

static目錄里面的檔案和index.html的檔案名是不帶hash值的，其他的檔案都是帶有hash值的

補充：打包后發現一些頁面檔案很小，只有幾K

如下圖所示，雖然是按需加載，但是感覺浪費服務器請求

這時，我們可以配置webpack的特殊注釋(需要 Webpack > 2.4)，將一些按需加載的路由打包到同一個js檔案

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
復制代碼

這里需要注意一下，雖然每個檔案單獨打包都是1k，但是1k+1k不等于2k，也就是說，打包到一起的體積會比原來分開的大，4個1k的檔案打包到一起，體積大約是10k，體積達到10k,剛好就會觸發gzip壓縮，壓縮之后體積在4k左右，所以并沒有什么影響，

服務器配置快取

理論知識有了，現在我們來實際操作一下：檔案名帶hash的(即css、js、font和img目錄下的所有檔案)設定一個月快取，瀏覽器可以直接使用快取不需要請求服務器，其他的檔案（index.html和static目錄下的檔案）設定為no-cache，即每次都來服務器檢查是否最新，

為什么快取時間是一個月，剛才不是說設定一年？設定為一年，當然沒有任何問題，不變的檔案可以一直使用，有改動的檔案，會重新請求，但是有該動的舊檔案已經沒有用了，由于過期時間是一年，所以不會被刪的，一直占用用戶的硬碟，系統更新越頻繁，無用舊檔案越多，占用的存盤也越多，這樣是不好的（用戶看了想打人），所以設定一個合理的時間比較好，一個月就挺好，

廢話不說，以Nginx服務器為例，配置如下（組態檔nginx.conf的http模塊）：

server {
  location = /index.html {
     add_header Cache-Control no-cache;
  }

  location ~ /static/ {
     add_header Cache-Control no-cache;
  }

  location ~ /(js/*|css/*|img/*|font/*) {
      expires 30d;
      add_header Cache-Control public;
   }
}
復制代碼

效果如下圖：當我們修改index.html內容時，會重新請求，沒有修改就會304，檔案名帶hash的都是直接從本地快取讀取，

有兩點需要注意的地方：

1. 專案里面不要用service-worker，這會影響我們的快取設定，瀏覽器會優先使用service-worker快取，vue-cli4的pwa插件生成的模板自帶service-worker

2. 除錯的時候記得允許快取

前端檔案設定gzip壓縮

webpack配置生成gzip壓縮的檔案

webpack有一個檔案壓縮的插件，可以將大檔案壓縮成gzip的格式，使用起來也非常簡單，先安裝：npm install --save-dev compression-webpack-plugin，

然后修改webpack配置（vue.config.js）：

const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 可加入需要的其他檔案型別，比如json
// 圖片不要壓縮，體積會比原來還大
const productionGzipExtensions = ["js", "css"];

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production"){
      return {
        plugins: [
          new CompressionWebpackPlugin({
            // filename: '[path].gz[query]',
            algorithm: "gzip",
            test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
            threshold: 10240, //對超過10k的資料進行壓縮
            minRatio: 0.6 // 壓縮比例，值為0 ~ 1
          })
        ]
      };
    }
  }
};
復制代碼

打包完的js/css檔案，都會多一份對應的gzip檔案，部署的時候需要配置一下，啟用gzip，這樣支持gzip壓縮的瀏覽器請求的就是壓縮檔案，不支持的瀏覽器請求的就是源檔案，gzip壓縮檔案體積會小很多，

字體檔案是否需要gzip？

網站中常見的圖片的格式有jpg(jpeg)、png、gif、webp，這些格式的圖片本身已經優化了，所以不再需要gzip，實際上對圖片進行gzip壓縮，不僅沒有效果，反而可能使圖片體積更大，那么字體檔案呢，是不是和圖片一樣？

從阿里巴巴矢量圖庫生成的圖示字體的css中我們可以看出，一般常見的字體檔案有：eot、woff、ttf、svg，另外woff2是以base64的格式存盤的，

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1587624344896'), /* IE9 */
  url('iconfont.woff?t=1587624344896') format('woff'),
  url('data:application/x-font-woff2;charset=utf-8;base64,...') format('woff2'),
  url('iconfont.ttf?t=1587624344896') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1587624344896#iconfont') format('svg'); /* iOS 4.1- */
}
復制代碼

查閱資料后發現：eot 和 ttf 格式一般情況下本身不壓縮，也就是說可以進行gzip壓縮，而woff格式具有內建壓縮，不需要gzip壓縮，

實際測驗一下，發現eot和ttf可以進行壓縮，效果還不錯，而woff格式的，CompressionWebpackPlugin插件根本不支持壓縮，即使你寫了配置了壓縮woff檔案，它也不會生成gz檔案，

并且實驗發現,svg雖然是圖片，但是也可以進行gzip壓縮，壓縮效果還不錯：

結論：svg、eot 和 ttf 這三種格式的字體檔案可以使用CompressionWebpackPlugin進行壓縮，并且配合Nginx的gzip_types配置，woff和woff2格式的字體檔案不需要gzip，

服務器配置gzip壓縮

Nginx是前端檔案常用的服務器，Nginx服務器的組態檔nginx.conf的http模塊：

server {
  # 開啟gzip on為開啟，off為關閉
  gzip on;
  # 檢查是否存在請求靜態檔案的gz結尾的檔案，如果有則直接回傳該gz檔案內容，不存在則先壓縮再回傳
  gzip_static on;
  # 設定允許壓縮的頁面最小位元組數，頁面位元組數從header頭中的Content-Length中進行獲取，
  # 默認值是0，不管頁面多大都壓縮，
  # 建議設定成大于10k的位元組數，配合compression-webpack-plugin
  gzip_min_length 10k;
  # 對特定的MIME型別生效,其中'text/html’被系統強制啟用
  gzip_types text/javascript application/javascript text/css application/json;
  # Nginx作為反向代理的時候啟用，開啟或者關閉后端服務器回傳的結果
  # 匹配的前提是后端服務器必須要回傳包含"Via"的 header頭
  # off(關閉所有代理結果的資料的壓縮)
  # expired(啟用壓縮,如果header頭中包括"Expires"頭資訊)
  # no-cache(啟用壓縮,header頭中包含"Cache-Control:no-cache")
  # no-store(啟用壓縮,header頭中包含"Cache-Control:no-store")
  # private(啟用壓縮,header頭中包含"Cache-Control:private")
  # no_last_modefied(啟用壓縮,header頭中不包含"Last-Modified")
  # no_etag(啟用壓縮,如果header頭中不包含"Etag"頭資訊)
  # auth(啟用壓縮,如果header頭中包含"Authorization"頭資訊)
  # any - 無條件啟用壓縮
  gzip_proxied any;
  # 請求加個 vary頭，給代理服務器用的，有的瀏覽器支持壓縮，有的不支持，所以避免浪費不支持的也壓縮
  gzip_vary on;
  # 同 compression-webpack-plugin 插件一樣，gzip壓縮比（1~9），
  # 越小壓縮效果越差，但是越大處理越慢，一般取中間值
  gzip_comp_level 6;
  # 獲取多少記憶體用于快取壓縮結果，‘16  8k’表示以8k*16 為單位獲得，
  # PS: 如果沒有.gz檔案，是需要Nginx實時壓縮的
  gzip_buffers 16 8k;
  # 注：99.99%的瀏覽器基本上都支持gzip解壓了，所以可以不用設這個值,保持系統默認即可，
  gzip_http_version 1.1; 
}
復制代碼

檢查gzip是否生效

瀏覽器檔案請求的請求頭包含欄位Accept-Encoding: gzip代表瀏覽器支持gzip壓縮檔案

檔案回應頭包含欄位Content-Encoding: gzip代表回傳的是壓縮檔案

同時NetWork一欄還可以查看到檔案的實際大小和實際的請求（gzip）檔案大小

檢查Nginx是否使用了我們提供的gz檔案

Nginx自帶gzip壓縮功能，如果我們沒提供，它會實時壓縮（例如index.html檔案），這就很浪費服務器資源了，現在我們已經提供js和css的gz檔案，如何判斷Nginx是使用了我們提供的gz檔案，而不是自己壓縮的呢？

上面有一個配置項：gzip_static on;，開啟之后Nginx會優先使用我們的gz檔案，但是還是不能確定，Nginx有沒有使用gz檔案，

查看network請求發現，每一個檔案都有etag回應頭，如果Nginx使用了已有的gz檔案，那么這個請求的etag值不帶有W/，反之，如果是檔案是Nginx壓縮的，etag值則會帶有W/，

例如index.html:

拿chunk-vendors.js做一個實驗，這個檔案本身是帶有gz檔案的，請求的etag如下（不帶有W/）：

這時候我們刪掉服務器上chunk-vendors.js對應的gz檔案，重繪頁面，請求如下：

綜上，我們就可以驗證，只要我們配置了gzip_static on;，Nginx就會優先使用了我們提供的gz檔案，

附錄 - windows安裝Nginx服務器

1. 下載windows下Nginx的安裝包：nginx.org/en/download…

2. 解壓壓縮包

3. 在Nginx的目錄下使用cmd命令列，啟動命令：start nginx，關閉命令：nginx -s stop

備注：修改組態檔需要多載配置：nginx -s reload，啟動之后，打開http://localhost:80就能看的效果

總結

1.頁面檔案合理的設定快取和gzip壓縮是實實在在能提升用戶體驗的操作，而且比少寫幾個回圈、洗掉幾行代碼優化強得多，但是需要前端和運維的密切配合，才能實作最佳方案，

service worker是用來實作離線應用的，文章中沒有詳細贅述，vue-cli4的pwa插件生成的模板自帶service worker，或許這才是vue專案快取的最佳實踐？

2.注意：光理論是不夠的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理

標籤：JavaScript

上一篇：Vue3 到底哪里好？和React Hook對比有啥有優勢？本文詳解

下一篇：摸魚日記之—— js 中的遍歷器：Iterator 與 for of