公司前端項(xiàng)目部署現(xiàn)狀

將 html 托管給后端，前端只發(fā)靜態(tài)資源（index.js/index.css），然后通過某種方式去刷 html 的靜態(tài)資源版本號(hào)（?version=時(shí)間戳或遞增數(shù)字）。

比較好的實(shí)踐

我們先來看看前端項(xiàng)目部署的比較好實(shí)踐是什么？

出處：大公司里怎樣開發(fā)和部署前端代碼？

可以總結(jié)出以下四點(diǎn)：

1. 配置超長(zhǎng)時(shí)間的本地緩存 —— 節(jié)省帶寬，提高性能
2. 采用內(nèi)容摘要作為緩存更新依據(jù) —— 精確的緩存控制
3. 靜態(tài)資源 CDN 部署 —— 優(yōu)化網(wǎng)絡(luò)請(qǐng)求
4. 變更資源發(fā)布路徑實(shí)現(xiàn)非覆蓋式發(fā)布 —— 平滑升級(jí)

上面文章可是本文的基石，5 年過去了，更好的方案是什么呢，還希望大佬賜教。

作為一個(gè)畢業(yè) 1 年的菜鳥，我就先著上面的文章來看看目前公司發(fā)布流程的不足吧。

公司部署方案優(yōu)缺點(diǎn)

前端只發(fā)布靜態(tài)資源，只要 html 引用的資源不刷版本號(hào)，對(duì)老用戶是沒有影響的（存在強(qiáng)緩存，直接請(qǐng)求本地緩存，對(duì)應(yīng)實(shí)踐 1），新用戶雖然沒有緩存，但由于是靜態(tài)資源是同名覆蓋發(fā)布，所以請(qǐng)求新的 index.js/index.css 資源，只要資源不依賴 html 結(jié)構(gòu)，看到新版本功能，也沒有影響（注意：如果依賴 html 結(jié)構(gòu)，請(qǐng)求新資源可能就會(huì)出現(xiàn)問題，好在目前單頁(yè)應(yīng)用基本不依賴 html 結(jié)構(gòu)，一個(gè)#root 根節(jié)點(diǎn) 就夠了）。

（強(qiáng)行）優(yōu)點(diǎn)

1. 覆蓋發(fā)布。服務(wù)器不會(huì)有大量靜態(tài)資源文件積累。（這個(gè)很重要？）
2. 后端可以向 HTML 內(nèi)注入一些內(nèi)容，比如用戶信息。

缺點(diǎn)

1. 粗粒度的版本號(hào)刷新策略，導(dǎo)致根據(jù)文件內(nèi)容變化選擇性更新緩存（對(duì)應(yīng)實(shí)踐 2）無法實(shí)施
2. 覆蓋發(fā)布。在 html 刷新版本號(hào)前，新用戶和老用戶可能看到的頁(yè)面版本（功能）不同
3. html 托管在后端，導(dǎo)致一定程度的前后端未分離（譬如打包策略變更需要后端配合更改 html）

照貓畫虎

那么按照上面的實(shí)踐，如何處理比較好呢？

1. 前端每次基于 content hash（依賴內(nèi)容摘要算法） 打包生成靜態(tài)資源文件名(例如 aaa.[contenthash].js 與 bbb.[contenthash].css)，文件名是否變化取決于文件內(nèi)容是否變化
2. 使用前端的 html，前端可在打包過程中自動(dòng)注入靜態(tài)資源文件地址
3. 靜態(tài)資源先發(fā)布，html 后發(fā)布

再來看看上面的缺點(diǎn)是否被解決了？

1. 粗粒度的版本號(hào)刷新策略，導(dǎo)致根據(jù)文件內(nèi)容變化選擇性更新緩存（對(duì)應(yīng)實(shí)踐 2）無法實(shí)施

文件名是基于 content hash（依賴內(nèi)容摘要算法）生成，在發(fā)布新的 html 后，若文件內(nèi)容未發(fā)生變化，文件名不會(huì)發(fā)生改變，依舊使用本地強(qiáng)緩存，若文件內(nèi)容變化，文件名會(huì)發(fā)生改變，會(huì)請(qǐng)求新的靜態(tài)資源，達(dá)到了選擇性更新緩存的效果。

2. 覆蓋發(fā)布。在 html 刷新版本號(hào)前，新用戶和老用戶可能看到的頁(yè)面版本（功能）不同

非覆蓋式發(fā)布，文件名[contenthash]不同不會(huì)覆蓋，舊的靜態(tài)資源文件依舊存在。

新的靜態(tài)資源發(fā)布后，新的 html 未發(fā)布前這個(gè)時(shí)間段內(nèi)，老用戶請(qǐng)求到舊的 html，請(qǐng)求的是舊的靜態(tài)資源，文件名(或者說文件路徑)未變化，依舊使用本地強(qiáng)緩存，新用戶請(qǐng)求到舊的 html，沒有本地緩存，但舊的靜態(tài)資源未被覆蓋，依舊可以請(qǐng)求到，此時(shí)看到的都是舊版本內(nèi)容。

新的 html 發(fā)布后，老用戶瀏覽器會(huì)選擇性更新本地緩存，新用戶直接請(qǐng)求新的靜態(tài)資源，看到的都是新版本內(nèi)容。

3. html 托管在后端，導(dǎo)致一定程度的前后端未分離（譬如打包策略變更需要后端配合更改 html）

html 完全由前端控制，后端只需要提供 API 即可，前后端真正意義上的完全分離。

缺點(diǎn)：

• 發(fā)生變化的文件 hash 值不同，非覆蓋發(fā)布，可能造成服務(wù)器上無用的靜態(tài)資源越來越多，但這是可以解決的
• 后端不能往 html 注入一些內(nèi)容

結(jié)語

經(jīng)驗(yàn)淺了些，參考的資料古老了些，可能有些地方有失偏頗，請(qǐng)一定要指正。

而且項(xiàng)目上線是肯定要配 Nginx 的，要去找運(yùn)維幫忙配，流程上還有可以優(yōu)化的地方，現(xiàn)在這種形式對(duì)前端制約太大了。