Vue項目如何部署？實戰教你

来源:https://www.cnblogs.com/chengxuyuanaa/archive/2020/06/09/13071208.html
-Advertisement-
Play Games

前言 使用vue、react、angular等技術開發過程中，我們都會遇到以下問題： 首屏載入慢 每一次更新都需要清除瀏覽器緩存才能看到效果(經常被測試吐槽) 這兩個問題可以從很多方面進行優化，今天我就從前端頁面部署階段來優化一下這兩個問題。PS：以下內容都基於vue-cli3+。 3.光理論是不夠 ...


前言

使用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

 

 

 

 

  1. 調試的時候記得允許緩存

 

 

前端文件設置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…

 

 

  1. 解壓壓縮包

 

 

  1. 在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 免費獲取，小白勿進哦！

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML基礎02
    表單form 作用:用於獲取用戶輸入的信息,並且將信息提交到伺服器 學習表單就是學習表單中有哪些控制項.比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、覆選框(vheckboxes)等等。 表單通常使用表單標簽<from>來設置: <form> <input /> < ...
  • Nodejs中ES Modules如何操作運用？本文詳解
    2020-05-26 Nodejs v12.17.0 LTS 版發佈，去掉 --experimental-modules 標誌。 1、雖然已在最新的 LTS v12.17.0 中支持，但是目前仍處於 Stability: 1 - Experimental 實驗階段，如果是在生產環境使用該功能，還應保 ...
  • Vue學習總結之Vue的生命周期是怎麼運用操作的？本文詳解
    寫在前面 1.每一篇文章都希望您有所收穫，每一篇文章都希望您能靜下心來瀏覽、閱讀。每一篇文章都是作者精心打磨的作品。 2.如果您覺得二郎神楊戩有點東西的話，作者希望你可以幫我點亮那個點贊的按鈕，對於二郎神楊戩這個暖男來說，真的真的非常重要，這將是我持續寫作的動力。您只需要小手輕輕一點，帶來的卻是溫暖 ...
  • Koa源碼解析，帶你實現一個迷你版的Koa
    前言 本文是我在閱讀 Koa 源碼後，並實現迷你版 Koa 的過程。如果你使用過 Koa 但不知道內部的原理，我想這篇文章應該能夠幫助到你，實現一個迷你版的 Koa 不會很難。 本文會循序漸進的解析內部原理，包括： 基礎版本的 koacontext 的實現中間件原理及實現 文件結構 applicat ...
  • VUE（一）組件製作成npm包，上傳和使用
    目錄 利用nexus搭建npm repository 配置開發環境的registry為我們自己的私有倉庫 編寫自定義vue組件 將自定義組件作為npm包上傳到nexus的repository中 在vue工程中使用使用自己製作的vue組件 nexus搭建npm repository nexus啟動（d ...
  • 在Windows下學習Nodejs、Npm和VUE
    前言 本文主要以開發的角度講解Node.js，Npm和Vue。 Node.js學習 什麼是Node.js Node.js簡單來說就是一個IISExpress，提供一個前端Html的獨立運行環境。 安裝Node.js 首先進入官網下載安裝包，官網下載地址：https://nodejs.org/en/d ...
  • 轉行WEB前端 感覺很迷茫 該怎麼做？
    有很多同學留言說，越學越迷茫，不知道該從哪裡下手，今天梳理了一些學習web前端的經驗，以及學習的步驟，分享給大家，希望對你們學習能有幫助。 ...
  • 摸魚日記之—— js 中的遍歷器：Iterator 與 for of
    1.什麼是Iterator ? 遍歷器（Iterator）它是一種介面，為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署 Iterator 介面，就可以完成遍歷操作。 Iterator 的作用有三個： 1.是為各種數據結構，提供一個統一的、簡便的訪問介面； 2.是使得數據結構的成員能夠按 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類