點擊上方“前端教程”，選擇“星標”

每天前端開發(fā)干貨第一時間送達！

作者：沉末_

juejin.im/post/5eb2243e51882555d8457833

前言

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

首屏加載慢

每一次更新都需要清除瀏覽器緩存才能看到效果(經常被測試吐槽)

這兩個問題可以從很多方面進行優(yōu)化，今天我就從前端頁面部署階段來優(yōu)化一下這兩個問題。PS：以下內容都基于vue-cli3+。

前端頁面文件緩存方案

從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值的作用

為了緩存的最優(yōu)體驗

我們先來簡單回顧下http緩存的知識(參考MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching_FAQ)：

HTTP1.0?是通過Expires(文件過期時間)和Last-Modified(最近修改時間)來告訴瀏覽器進行緩存的，這兩個字段都是?UTC?時間(絕對時間)。Expires?過期控制不穩(wěn)定，因為瀏覽器端可以隨意修改本地時間，導致緩存使用不精準。而且?Last-Modified?過期時間只能精確到秒。

HTTP1.1?通過Cache-Contorl和?Etag(版本號)進行緩存控制。瀏覽器先檢查?Cache-Control，如果有，則以?Cache-Control?為準，忽略?Expires。如果沒有?Cache-Control，則以?Expires?為準。

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

• public，資源允許被中間服務器緩存。瀏覽器請求服務器時，如果緩存時間沒到，中間服務器直接返回給瀏覽器內容，而不必請求源服務器。

• private，資源不允許被中間代理服務器緩存。瀏覽器請求服務器時，中間服務器都要把瀏覽器的請求透傳給服務器。

• no-cache，不管本地副本是否過期，每次訪問資源，瀏覽器都要向服務器詢問，如果文件沒變化，服務器只告訴瀏覽器繼續(xù)使用緩存(304)。

• no-store，瀏覽器和中間代理服務器都不能緩存資源。每次訪問資源，瀏覽器都必須請求服務器，并且，服務器不去檢查文件是否變化，而是直接返回完整的資源。

• must-revalidate，本地副本過期前，可以使用本地副本；本地副本一旦過期，必須去源服務器進行有效性校驗。

• proxy-revalidate，要求代理服務器針對緩存資源向源服務器進行確認。

• s-maxage：緩存服務器對資源緩存的最大時間。

現(xiàn)在99%的瀏覽器都是HTTP1.1及以上版本，我們配置緩存就使用Cache-Contorl和Etag配合就好了。

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

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

(2)而文件名帶有hash值，可以直接將文件的過期時間設置為1年，瀏覽器就不用檢查是否過期，直接使用。

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

所以利用文件名帶hash來做緩存，即能保證，頁面有修改瀏覽器能請求到最新的文件，又能節(jié)省服務器的請求(檢查是否過期的請求)。

實現(xiàn)無感知發(fā)版

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

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

總結：?凡是文件名帶有hash值的的文件都可以設置為“永久緩存”(一年)，其他不帶hash的文件使用etag來設置緩存，由Nginx判斷是否過期。

優(yōu)化打包結果

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

那么打包后的文件目錄就會變成這樣：

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

補充：打包后發(fā)現(xiàn)一些頁面文件很小，只有幾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,剛好就會觸發(fā)gzip壓縮，壓縮之后體積在4k左右，所以并沒有什么影響。

服務器配置緩存

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

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

廢話不說，以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的都是直接從本地緩存讀取。

有兩點需要注意的地方：

項目里面不要用service-worker，這會影響我們的緩存設置，瀏覽器會優(yōu)先使用service-worker緩存。vue-cli4生成的模板自帶service-worker

調試的時候記得允許緩存

前端文件設置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的數(shù)據進行壓縮
minRatio: 0.6 // 壓縮比例，值為0 ~ 1
})
]
};
}
}
};

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

字體文件是否需要gzip？

網站中常見的圖片的格式有jpg(jpeg)、png、gif、webp，這些格式的圖片本身已經優(yōu)化了，所以不再需要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- */
}

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

實際測試一下，發(fā)現(xiàn)eot和ttf可以進行壓縮，效果還不錯，而woff格式的，CompressionWebpackPlugin插件根本不支持壓縮，即使你寫了配置了壓縮woff文件，它也不會生成gz文件。

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

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

服務器配置gzip壓縮

Nginx是前端文件常用的服務器，Nginx服務器的配置文件nginx.conf的http模塊：

server {
# 開啟gzip on為開啟，off為關閉
gzip on;
# 檢查是否存在請求靜態(tài)文件的gz結尾的文件，如果有則直接返回該gz文件內容，不存在則先壓縮再返回
gzip_static on;
# 設置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從header頭中的Content-Length中進行獲取。
# 默認值是0，不管頁面多大都壓縮。
# 建議設置成大于10k的字節(jié)數(shù)，配合compression-webpack-plugin
gzip_min_length 10k;
# 對特定的MIME類型生效,其中'text/html’被系統(tǒng)強制啟用
gzip_types text/javascript application/javascript text/css application/json;
# Nginx作為反向代理的時候啟用，開啟或者關閉后端服務器返回的結果
# 匹配的前提是后端服務器必須要返回包含"Via"的 header頭
# off(關閉所有代理結果的數(shù)據的壓縮)
# 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解壓了，所以可以不用設這個值,保持系統(tǒng)默認即可。
gzip_http_version 1.1;
}

檢查gzip是否生效

瀏覽器文件請求的請求頭包含字段Accept-Encoding: gzip代表瀏覽器支持gzip壓縮文件

文件響應頭包含字段Content-Encoding: gzip代表返回的是壓縮文件

同時NetWork一欄還可以查看到文件的實際大小和實際的請求(gzip)文件大小

檢查Nginx是否使用了我們提供的gz文件

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

上面有一個配置項：gzip_static on;，開啟之后Nginx會優(yōu)先使用我們的gz文件，但是還是不能確定，Nginx有沒有使用gz文件。

查看network請求發(fā)現(xiàn)，每一個文件都有etag響應頭，如果Nginx使用了已有的gz文件，那么這個請求的etag值不帶有W/，反之，如果是文件是Nginx壓縮的，etag值則會帶有W/。

例如index.html:

拿chunk-vendors.js做一個實驗，這個文件本身是帶有gz文件的，請求的etag如下(不帶有W/)：

這時候我們刪掉服務器上chunk-vendors.js對應的gz文件，刷新頁面，請求如下：

綜上，我們就可以驗證，只要我們配置了gzip_static on;，Nginx就會優(yōu)先使用了我們提供的gz文件。

附錄 -?windows安裝Nginx服務器

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

解壓壓縮包

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

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

總結

頁面文件合理的設置緩存和gzip壓縮是實實在在能提升用戶體驗的操作，而且比少寫幾個循環(huán)、刪除幾行代碼優(yōu)化強得多，但是需要前端和運維的密切配合，才能實現(xiàn)最佳方案。

service worker是用來實現(xiàn)離線應用的，文章中沒有詳細贅述。vue-cli4生成的模板自帶service worker，或許這才是vue項目緩存的最佳實踐？

最后，Nginx并不是很熟悉，有什么問題和錯誤，歡迎指出！

??愛心三連擊

感謝 · 轉發(fā)歡迎大家留言

好文章，我在看??

總結

以上是生活随笔為你收集整理的linux部署vue项目_Vue项目部署的最佳实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。