angular项目打包_vue项目部署的最佳实践
前言
使用vue、react、angular等技術(shù)開發(fā)過程中,我們都會遇到以下問題:
這兩個(gè)問題可以從很多方面進(jìn)行優(yōu)化,今天我就從前端頁面部署階段來優(yōu)化一下這兩個(gè)問題。PS:以下內(nèi)容都基于vue-cli3+。
晨曦:為什么整個(gè)互聯(lián)網(wǎng)行業(yè)都缺前端工程師??zhuanlan.zhihu.com前端頁面文件緩存方案
從vue-cli3打包說起
路由使用按需加載后,打包生成的文件,每一個(gè)路由頁面都對應(yīng)一個(gè)js和css文件,入口main.js及其依賴則打包成了app.js和app.css,公共依賴都放到了chunk-vendors.js。
vue-cli3打包后的dist/js文件夾:
可以看到,打包生成的js/css/img等文件的文件名都帶有hash值,當(dāng)源文件內(nèi)容改變時(shí),重新打包后對應(yīng)的文件hash值也會改變。舉個(gè)栗子,我們修改了about.vue中js的內(nèi)容,重新打包時(shí)about.js的hash值會改變,以及依賴about.vue的文件app.js的hash值也會改變,而其他沒有修改的文件,打包后的hash值都不會改變。
我們知道,文件名帶hash是為了消除緩存帶來的影響的,但是所有文件都不緩存肯定不是一個(gè)很好的解決方案。
vue-cli3打包生成的文件名帶hash值的作用
為了緩存的最優(yōu)體驗(yàn)
我們先來簡單回顧下http緩存的知識(參考MDN:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching_FAQ):
Cache-Control 除了可以設(shè)置 max-age(相對過期時(shí)間,以秒為單位)以外,還可以設(shè)置如下幾種常用值:
- public,資源允許被中間服務(wù)器緩存。瀏覽器請求服務(wù)器時(shí),如果緩存時(shí)間沒到,中間服務(wù)器直接返回給瀏覽器內(nèi)容,而不必請求源服務(wù)器。
- private,資源不允許被中間代理服務(wù)器緩存。瀏覽器請求服務(wù)器時(shí),中間服務(wù)器都要把瀏覽器的請求透傳給服務(wù)器。
- no-cache,不管本地副本是否過期,每次訪問資源,瀏覽器都要向服務(wù)器詢問,如果文件沒變化,服務(wù)器只告訴瀏覽器繼續(xù)使用緩存(304)。
- no-store,瀏覽器和中間代理服務(wù)器都不能緩存資源。每次訪問資源,瀏覽器都必須請求服務(wù)器,并且,服務(wù)器不去檢查文件是否變化,而是直接返回完整的資源。
- must-revalidate,本地副本過期前,可以使用本地副本;本地副本一旦過期,必須去源服務(wù)器進(jìn)行有效性校驗(yàn)。
- proxy-revalidate,要求代理服務(wù)器針對緩存資源向源服務(wù)器進(jìn)行確認(rèn)。
- s-maxage:緩存服務(wù)器對資源緩存的最大時(shí)間。
現(xiàn)在99%的瀏覽器都是HTTP1.1及以上版本,我們配置緩存就使用Cache-Contorl和Etag配合就好了。
那么問題來了,檢查文件是否最新不是用etag嗎,為什么文件名還需要有hash值?
(1)如果文件名不帶hash值,文件版本得用etag來標(biāo)記,瀏覽器需要先去檢查下是否過期,服務(wù)器則需要檢查文件是否最新。
(2)而文件名帶有hash值,可以直接將文件的過期時(shí)間設(shè)置為1年,瀏覽器就不用檢查是否過期,直接使用。
原因是,如果頁面源文件有修改,生成的js/css的hash值就會修改,對應(yīng)的請求js/css地址也會變化,htpp地址改了,也就不用檢查是否過期。沒修改的文件的hash則不變,可以使用緩存文件。
所以利用文件名帶hash來做緩存,即能保證,頁面有修改瀏覽器能請求到最新的文件,又能節(jié)省服務(wù)器的請求(檢查是否過期的請求)。
實(shí)現(xiàn)無感知發(fā)版
只有一臺服務(wù)器的情況下,我們的頁面文件需要更新,通常操作是:先刪掉舊文件,然后上傳新文件,這段時(shí)間系統(tǒng)將不可用,對用戶有一定的影響。
僅更新前端頁面的前提下,文件名帶有hash值還可以實(shí)現(xiàn)用戶無感知發(fā)版:系統(tǒng)更新時(shí),只需要將打包之后的文件除index.html以外的文件(js/css/img),全部上傳到服務(wù)器網(wǎng)站目錄,未修改文件(即重名文件)直接跳過,有修改的文件由于文件的hash值不同會被上傳,上傳完畢我們再將index.html覆蓋掉舊版就行。這段時(shí)間用戶已請求舊版本index.html的無影響(不會出現(xiàn)文件404,因?yàn)樾屡f版本js/css同時(shí)存在),而新訪問用戶則請求的是新版index.html,訪問舊頁面用戶刷新也會請求新版文件,并且無緩存影響,即對用戶使用0影響。一段時(shí)間之后,我們只需要按文件生成時(shí)間對比一下刪除舊文件即可。PS:替換前端文件不需要重啟服務(wù)器。
總結(jié): 凡是文件名帶有hash值的的文件都可以設(shè)置為“永久緩存”(一年),其他不帶hash的文件使用etag來設(shè)置緩存,由Nginx判斷是否過期。
優(yōu)化打包結(jié)果
頁面部署的時(shí)候,有個(gè)問題,如何區(qū)分文件名是否帶有hash值呢?正則匹配顯然不是很好的辦法。其實(shí)辦法很簡單,打包生成的文件都帶有hash值,而public目錄里面的文件不會經(jīng)過打包處理。所以只需要將public目錄里面的文件除了index.html全部放到一個(gè)static目錄(注意引入路徑)
那么打包后的文件目錄就會變成這樣:
static目錄里面的文件和index.html的文件名是不帶hash值的,其他的文件都是帶有hash值的
補(bǔ)充:打包后發(fā)現(xiàn)一些頁面文件很小,只有幾K
如下圖所示,雖然是按需加載,但是感覺浪費(fèi)服務(wù)器請求
這時(shí),我們可以配置webpack的特殊注釋(需要 Webpack > 2.4),將一些按需加載的路由打包到同一個(gè)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')這里需要注意一下,雖然每個(gè)文件單獨(dú)打包都是1k,但是1k+1k不等于2k,也就是說,打包到一起的體積會比原來分開的大,4個(gè)1k的文件打包到一起,體積大約是10k,體積達(dá)到10k,剛好就會觸發(fā)gzip壓縮,壓縮之后體積在4k左右,所以并沒有什么影響。
服務(wù)器配置緩存
理論知識有了,現(xiàn)在我們來實(shí)際操作一下:文件名帶hash的(即css、js、font和img目錄下的所有文件)設(shè)置一個(gè)月緩存,瀏覽器可以直接使用緩存不需要請求服務(wù)器。其他的文件(index.html和static目錄下的文件)設(shè)置為no-cache,即每次都來服務(wù)器檢查是否最新。
為什么緩存時(shí)間是一個(gè)月,剛才不是說設(shè)置一年?設(shè)置為一年,當(dāng)然沒有任何問題。不變的文件可以一直使用,有改動的文件,會重新請求,但是有該動的舊文件已經(jīng)沒有用了,由于過期時(shí)間是一年,所以不會被刪的,一直占用用戶的硬盤,系統(tǒng)更新越頻繁,無用舊文件越多,占用的存儲也越多,這樣是不好的(用戶看了想打人)。所以設(shè)置一個(gè)合理的時(shí)間比較好,一個(gè)月就挺好。
廢話不說,以Nginx服務(wù)器為例,配置如下(配置文件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;} }效果如下圖:當(dāng)我們修改index.html內(nèi)容時(shí),會重新請求,沒有修改就會304,文件名帶hash的都是直接從本地緩存讀取。
有兩點(diǎn)需要注意的地方:
前端文件設(shè)置gzip壓縮
webpack配置生成gzip壓縮的文件
webpack有一個(gè)文件壓縮的插件,可以將大文件壓縮成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ù)據(jù)進(jìn)行壓縮minRatio: 0.6 // 壓縮比例,值為0 ~ 1})]};}} };打包完的js/css文件,都會多一份對應(yīng)的gzip文件,部署的時(shí)候需要配置一下,啟用gzip,這樣支持gzip壓縮的瀏覽器請求的就是壓縮文件,不支持的瀏覽器請求的就是源文件,gzip壓縮文件體積會小很多。
字體文件是否需要gzip?
網(wǎng)站中常見的圖片的格式有jpg(jpeg)、png、gif、webp,這些格式的圖片本身已經(jīng)優(yōu)化了,所以不再需要gzip。實(shí)際上對圖片進(jìn)行g(shù)zip壓縮,不僅沒有效果,反而可能使圖片體積更大。那么字體文件呢,是不是和圖片一樣?
從阿里巴巴矢量圖庫生成的圖標(biāo)字體的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 格式一般情況下本身不壓縮,也就是說可以進(jìn)行g(shù)zip壓縮。而woff格式具有內(nèi)建壓縮,不需要gzip壓縮。
實(shí)際測試一下,發(fā)現(xiàn)eot和ttf可以進(jìn)行壓縮,效果還不錯(cuò),而woff格式的,CompressionWebpackPlugin插件根本不支持壓縮,即使你寫了配置了壓縮woff文件,它也不會生成gz文件。
并且實(shí)驗(yàn)發(fā)現(xiàn),svg雖然是圖片,但是也可以進(jìn)行g(shù)zip壓縮,壓縮效果還不錯(cuò):
結(jié)論:svg、eot 和 ttf 這三種格式的字體文件可以使用CompressionWebpackPlugin進(jìn)行壓縮,并且配合Nginx的gzip_types配置,woff和woff2格式的字體文件不需要gzip。
服務(wù)器配置gzip壓縮
Nginx是前端文件常用的服務(wù)器,Nginx服務(wù)器的配置文件nginx.conf的http模塊:
server {# 開啟gzip on為開啟,off為關(guān)閉gzip on;# 檢查是否存在請求靜態(tài)文件的gz結(jié)尾的文件,如果有則直接返回該gz文件內(nèi)容,不存在則先壓縮再返回gzip_static on;# 設(shè)置允許壓縮的頁面最小字節(jié)數(shù),頁面字節(jié)數(shù)從header頭中的Content-Length中進(jìn)行獲取。# 默認(rèn)值是0,不管頁面多大都壓縮。# 建議設(shè)置成大于10k的字節(jié)數(shù),配合compression-webpack-plugingzip_min_length 10k;# 對特定的MIME類型生效,其中'text/html’被系統(tǒng)強(qiáng)制啟用gzip_types text/javascript application/javascript text/css application/json;# Nginx作為反向代理的時(shí)候啟用,開啟或者關(guān)閉后端服務(wù)器返回的結(jié)果# 匹配的前提是后端服務(wù)器必須要返回包含"Via"的 header頭# off(關(guān)閉所有代理結(jié)果的數(shù)據(jù)的壓縮)# 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;# 請求加個(gè) vary頭,給代理服務(wù)器用的,有的瀏覽器支持壓縮,有的不支持,所以避免浪費(fèi)不支持的也壓縮gzip_vary on;# 同 compression-webpack-plugin 插件一樣,gzip壓縮比(1~9),# 越小壓縮效果越差,但是越大處理越慢,一般取中間值gzip_comp_level 6;# 獲取多少內(nèi)存用于緩存壓縮結(jié)果,‘16 8k’表示以8k*16 為單位獲得。# PS: 如果沒有.gz文件,是需要Nginx實(shí)時(shí)壓縮的gzip_buffers 16 8k;# 注:99.99%的瀏覽器基本上都支持gzip解壓了,所以可以不用設(shè)這個(gè)值,保持系統(tǒng)默認(rèn)即可。gzip_http_version 1.1; }檢查gzip是否生效
瀏覽器文件請求的請求頭包含字段Accept-Encoding: gzip代表瀏覽器支持gzip壓縮文件
文件響應(yīng)頭包含字段Content-Encoding: gzip代表返回的是壓縮文件
同時(shí)NetWork一欄還可以查看到文件的實(shí)際大小和實(shí)際的請求(gzip)文件大小
檢查Nginx是否使用了我們提供的gz文件
Nginx自帶gzip壓縮功能,如果我們沒提供,它會實(shí)時(shí)壓縮(例如index.html文件),這就很浪費(fèi)服務(wù)器資源了。現(xiàn)在我們已經(jīng)提供js和css的gz文件,如何判斷Nginx是使用了我們提供的gz文件,而不是自己壓縮的呢?
上面有一個(gè)配置項(xiàng):gzip_static on;,開啟之后Nginx會優(yōu)先使用我們的gz文件,但是還是不能確定,Nginx有沒有使用gz文件。
查看network請求發(fā)現(xiàn),每一個(gè)文件都有etag響應(yīng)頭,如果Nginx使用了已有的gz文件,那么這個(gè)請求的etag值不帶有W/,反之,如果是文件是Nginx壓縮的,etag值則會帶有W/。
例如index.html:
拿chunk-vendors.js做一個(gè)實(shí)驗(yàn),這個(gè)文件本身是帶有g(shù)z文件的,請求的etag如下(不帶有W/):
這時(shí)候我們刪掉服務(wù)器上chunk-vendors.js對應(yīng)的gz文件,刷新頁面,請求如下:
綜上,我們就可以驗(yàn)證,只要我們配置了gzip_static on;,Nginx就會優(yōu)先使用了我們提供的gz文件。
附錄 - windows安裝Nginx服務(wù)器
1.下載windows下Nginx的安裝包:http://nginx.org/en/download…
2.解壓壓縮包
備注:修改配置文件需要重載配置:nginx -s reload。啟動之后,打開http://localhost:80就能看的效果
晨曦:前端啃完這些題,你拿不到20K算我輸!?zhuanlan.zhihu.com總結(jié)
頁面文件合理的設(shè)置緩存和gzip壓縮是實(shí)實(shí)在在能提升用戶體驗(yàn)的操作,而且比少寫幾個(gè)循環(huán)、刪除幾行代碼優(yōu)化強(qiáng)得多,但是需要前端和運(yùn)維的密切配合,才能實(shí)現(xiàn)最佳方案。
service worker是用來實(shí)現(xiàn)離線應(yīng)用的,文章中沒有詳細(xì)贅述。vue-cli4生成的模板自帶service worker,或許這才是vue項(xiàng)目緩存的最佳實(shí)踐?
最后,喜歡本文可以點(diǎn)個(gè)『 贊』,有什么問題和錯(cuò)誤,歡迎指出!
作者:沉末_
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
總結(jié)
以上是生活随笔為你收集整理的angular项目打包_vue项目部署的最佳实践的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Ps中如何删除图片背景颜色
- 下一篇: 刺五加皮的功效与作用、禁忌和食用方法