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

假設一個使用動態(tài)導入的情況(使用import())，在app.js動態(tài)導入component.js

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

build之后，產生3個包。

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

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

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

如果采用這種分包策略

1. 當更改app的時候runtime與（被分出的動態(tài)加載的代碼）0.01e47fe5.js的名稱(hash)不會改變，main的名稱(hash)會改變。
2. 當更改component.js，main的名稱(hash)不會改變，runtime與 (動態(tài)加載的代碼) 0.01e47fe5.js的名稱(hash)會改變。

下面這個連接有介紹，但是需要有翻墻。建議自己試一下，很簡單。。。
https://developers.google.com...