摘要:項(xiàng)目已經(jīng)配置了,并且生效。期望效果新增模塊后其他模塊的構(gòu)建后的文件沒(méi)有變化,提高緩存命中率。新增這個(gè)模塊后打包結(jié)果結(jié)構(gòu)如下至此,通過(guò)實(shí)現(xiàn)長(zhǎng)效緩存實(shí)踐完美收官。
前言
如何使Webpack生成穩(wěn)定的Chunkid問(wèn)題解決了,特來(lái)反哺社區(qū)
先總結(jié)一下。HashedModuleIdsPlugin用于穩(wěn)定 ModuleId 的,我問(wèn)的問(wèn)題核心是 **生成穩(wěn)
定的ChunkId**,這兩者是不一樣的。
有人對(duì)Webpack比較了解的嗎?
我這里有個(gè)問(wèn)題想要請(qǐng)教一下:當(dāng)我們新增模塊(也就是entry加了新東西)的時(shí)候,怎么保證ChunkId保持穩(wěn)定
比如我在entry下新增加了三個(gè)模塊,但是帶動(dòng)了許多構(gòu)建后的文件Hash也跟著變動(dòng),查看構(gòu)建后的代碼發(fā)現(xiàn)是因?yàn)镃hunkId發(fā)生了遞增導(dǎo)致的。項(xiàng)目已經(jīng)配置了HashedModuleIdsPlugin,并且生效。
期望效果 : entry新增模塊后,其他模塊的構(gòu)建后的文件Hash沒(méi)有變化,提高緩存命中率。
下面是添加新模塊并打包的前后文件Hash對(duì)比
添加新模塊前后對(duì)比截圖 如何生成穩(wěn)定ModuleId 表現(xiàn):只修改了 home/index.js 的代碼,但在最終的構(gòu)建結(jié)果中,vendor.js 的文件指紋也被修改了
原因有兩個(gè):webpack runtime (運(yùn)行時(shí)) 中包含 chunks ID 及其對(duì)應(yīng) chunkhash 的對(duì)象,但 runtime 被集成到 vendor.js 中。
entry 內(nèi)容修改后,由于 webpack 的依賴(lài)收集規(guī)則導(dǎo)致構(gòu)建產(chǎn)生的 entry chunk 對(duì)應(yīng)的 ID 發(fā)生變化,webpack runtime 也因此被改變。
解決辦法:使用CommonsChunkPlugin 繼續(xù)將webpack runtime抽離出來(lái)
使用HashedModuleIdsPlugin代替原有的ModuleId根據(jù)依賴(lài)的收集順序遞增的正整數(shù)生成規(guī)則。
順便一提,生成穩(wěn)定的ModuleId在官方文檔 - 緩存中有提及
早前經(jīng)過(guò)合理的配置(可以參考用 webpack 實(shí)現(xiàn)持久化緩存,實(shí)現(xiàn)了其他模塊變動(dòng)后,vendor.js的文件指紋不會(huì)發(fā)生變化的效果)
效果如下:
如何生成穩(wěn)定的ChunkId很多文章都只介紹到如何生成穩(wěn)定的ModuleId,沒(méi)有提到生成穩(wěn)定的ChunkId
后來(lái)經(jīng)過(guò) @dahoshaw的提醒
</>復(fù)制代碼
可以看下Webpack的源碼,Webpack是根據(jù)模塊的順序遞增chunkid,源代碼中的applyChunkIds函數(shù),所以官方有提供NamedChunksPlugin插件來(lái)根據(jù)文件名來(lái)穩(wěn)定你的chunkid
webpackJsonp有三個(gè)參數(shù),每次有新的entry加入說(shuō)明資源數(shù)增加了,Chunk數(shù)量也會(huì)跟著增加。ChunkId也會(huì)遞增
這有點(diǎn)類(lèi)似ModuleId遞增變動(dòng)導(dǎo)致的文件指紋變化而導(dǎo)致的長(zhǎng)效緩存失效
他推薦的文章 Predictable long term caching with Webpack確實(shí)寫(xiě)的不錯(cuò)!
解決辦法:在生產(chǎn)環(huán)境中的Webpack配置添加plugin: NamedChunksPlugin
</>復(fù)制代碼
// 使用模塊名稱(chēng)作為chunkid,替換掉原本的使用遞增id來(lái)作為chunkid導(dǎo)致的[新增entry模塊,其他模塊的hash發(fā)生抖動(dòng),導(dǎo)致客戶(hù)端長(zhǎng)效緩存失效]
config.plugins.push(new webpack.NamedChunksPlugin((chunk) => {
// 解決異步模塊打包的問(wèn)題
if (chunk.name) {
return chunk.name;
}
return chunk.modules.map(m => path.relative(m.context, m.request)).join("_");
}));
最后驗(yàn)證一下,我們先打包一下項(xiàng)目,打包結(jié)果結(jié)構(gòu)如下:
</>復(fù)制代碼
dist
├── home
│?? ├── haha.dc494f13ed558999751e.js
│?? ├── index.2266d24e04004acaa5a6.css
│?? └── index.2b15fbd2daa6c833f5d5.js
├── manifest.json
├── runtime.1de86da7006780a96879.js
├── static
│?? └── images
│?? ├── logo-ea7f33f9bddceac362c1d7f378043187.png
│?? └── share-icon-881a5a400142ab60684b3cec860611b4.png
├── sub-home
│?? ├── haha.141284e7095f605726ac.js
│?? ├── index.7039775e1ba458814d14.js
│?? └── index.efd6d51187ec8a058fe6.css
└── vendor.dee373a1cd36f461d200.js
4 directories, 11 files
假設(shè)我們打算新增sub-sub-home模塊。新增這個(gè)模塊后打包結(jié)果結(jié)構(gòu)如下:
</>復(fù)制代碼
dist
├── home
│?? ├── haha.dc494f13ed558999751e.js
│?? ├── index.2266d24e04004acaa5a6.css
│?? └── index.2b15fbd2daa6c833f5d5.js
├── manifest.json
├── runtime.1de86da7006780a96879.js
├── static
│?? └── images
│?? ├── logo-ea7f33f9bddceac362c1d7f378043187.png
│?? └── share-icon-881a5a400142ab60684b3cec860611b4.png
├── sub-home
│?? ├── haha.141284e7095f605726ac.js
│?? ├── index.7039775e1ba458814d14.js
│?? └── index.efd6d51187ec8a058fe6.css
├── sub-sub-home
│?? ├── haha.6501ce2d3a138709282b.js
│?? ├── index.c367ca84bd261f36f050.js
│?? └── index.efd6d51187ec8a058fe6.css
└── vendor.dee373a1cd36f461d200.js
5 directories, 14 files
至此,通過(guò)Webpack實(shí)現(xiàn)長(zhǎng)效緩存實(shí)踐完美收官。
參考項(xiàng)目演示地址
知乎 - webpack 每次打包公用vendor 每次hash都會(huì)變化,有辦法解決嗎?
用 webpack 實(shí)現(xiàn)持久化緩存
Predictable long term caching with Webpack
官方文檔 - 緩存
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/89026.html
摘要:最近一周一直都在折騰一些項(xiàng)目中常用的記錄下來(lái),以后免去簡(jiǎn)單的配置再去查文檔。常規(guī)入口指示應(yīng)該使用哪個(gè)模塊,來(lái)作為構(gòu)建其內(nèi)部依賴(lài)圖的開(kāi)始。把代碼轉(zhuǎn)換成,在使用語(yǔ)言中有介紹。擴(kuò)展語(yǔ)法,使用下一代,在使用中有介紹。用于忽略部分文件。 最近一周一直都在折騰webpack,一些項(xiàng)目中常用的記錄下來(lái),以后免去簡(jiǎn)單的配置再去查文檔。 常規(guī) 1.入口 指示 webpack 應(yīng)該使用哪個(gè)模塊,來(lái)作為構(gòu)建...
摘要:可以通過(guò)配置屬性進(jìn)行修改,默認(rèn)將會(huì)自動(dòng)創(chuàng)建個(gè)庫(kù)文件僅含有依然會(huì)創(chuàng)建個(gè)庫(kù)文件僅含有假設(shè)所有的體積都大于將會(huì)創(chuàng)建一個(gè)庫(kù)文件和一個(gè)通用組件文件僅含有當(dāng)這些體積小于是,會(huì)故意將該模塊復(fù)制到三個(gè)文件中。 該文章內(nèi)容大致翻譯自 webpack 4: Code Splitting, chunk graph and the splitChunks optimization 原有的問(wèn)題 webpack...
摘要:所以雖然是是用在小程序上,不過(guò)我想對(duì)于的狀態(tài)管理,也有這么一丟丟啟發(fā)。在目錄下放入和這兩個(gè)庫(kù),同時(shí)在目錄下新建用于存放全局狀態(tài)。建立由于小程序中不支持裝飾器,所以采用了的寫(xiě)法。另外,小程序中不支持路徑的省略。 what 名字很長(zhǎng)很繞靠口,總的來(lái)說(shuō),本文是對(duì)開(kāi)發(fā)小程序過(guò)程中使用mobx的一個(gè)總結(jié)。 狀態(tài)管理,相比大家也很熟悉,顧名思義,是對(duì)前端頁(yè)面繁復(fù)的狀態(tài)進(jìn)行管理,在此,我也不過(guò)多贅...
摘要:默認(rèn)做法是告訴瀏覽器這個(gè)文件的緩存時(shí)間,然后當(dāng)文件內(nèi)容被修改,則需要重命名該文件告訴瀏覽器需要重新下載和緩存,例如也能做類(lèi)似的工作。 上一篇介紹了 Webpack 優(yōu)化項(xiàng)目的四種技巧,分別是通過(guò) UglifyJS 插件實(shí)現(xiàn)對(duì) JavaScript 文件的壓縮,css-loader 提供的壓縮功能,配置NODE_ENV可以進(jìn)一步去掉無(wú)用代碼,tree-shaking幫助找到更多無(wú)用代碼 ...
閱讀 1686·2023-04-26 00:30
閱讀 3159·2021-11-25 09:43
閱讀 2890·2021-11-22 14:56
閱讀 3196·2021-11-04 16:15
閱讀 1158·2021-09-07 09:58
閱讀 2031·2019-08-29 13:14
閱讀 3115·2019-08-29 12:55
閱讀 997·2019-08-29 10:57