optimization.runtimeChunk 具體作用是什么？

webpack 的optimization.runtimeChunk這個(gè)配置項(xiàng)的具體作用是什么？看了文檔還是不懂

回答

編輯回答

奧特蛋

優(yōu)化持久化緩存的, runtime 指的是 webpack 的運(yùn)行環(huán)境(具體作用就是模塊解析, 加載) 和模塊信息清單, 模塊信息清單在每次有模塊變更(hash 變更)時(shí)都會(huì)變更, 所以我們想把這部分代碼單獨(dú)打包出來(lái), 配合后端緩存策略, 這樣就不會(huì)因?yàn)槟硞€(gè)模塊的變更導(dǎo)致包含模塊信息的模塊(通常會(huì)被包含在最后一個(gè) bundle 中)緩存失效. optimization.runtimeChunk 就是告訴 webpack 是否要把這部分單獨(dú)打包出來(lái).

2017年2月8日 06:17

編輯回答

乖乖瀦

假設(shè)一個(gè)使用動(dòng)態(tài)導(dǎo)入的情況(使用import())，在app.js動(dòng)態(tài)導(dǎo)入component.js

const app = () =>import('./component').then();

build之后，產(chǎn)生3個(gè)包。

0.01e47fe5.js
main.xxx.js
runtime.xxx.js

其中runtime，用于管理被分出來(lái)的包。下面就是一個(gè)runtimeChunk的截圖，可以看到chunkId這些東西。

...
function jsonpScriptSrc(chunkId) {
/******/         return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "." + {"0":"01e47fe5"}[chunkId] + ".bundle.js"
/******/     }
...

如果采用這種分包策略

當(dāng)更改app的時(shí)候runtime與（被分出的動(dòng)態(tài)加載的代碼）0.01e47fe5.js的名稱(chēng)(hash)不會(huì)改變，main的名稱(chēng)(hash)會(huì)改變。
當(dāng)更改component.js，main的名稱(chēng)(hash)不會(huì)改變，runtime與 (動(dòng)態(tài)加載的代碼) 0.01e47fe5.js的名稱(chēng)(hash)會(huì)改變。