`webpackChunkName` 是為預載入的文件取別名，`webpackPrefetch` 會在瀏覽器閑置下載文件，`webpackPreload` 會在父 chunk 載入時並行下載文件。 ...
Webpack 有非常多的概念，很多名詞長得都差不多。我把這些分散在文檔和教程里的內容總結起來，寫了一份 webpack 中的易混淆知識點，目前看是全網獨一份，大家可以加個收藏，方便以後檢索和學習。
全集鏈接 ➡️ webpack 易混淆知識點
這幾個名詞其實都是 webpack 魔法註釋（magic comments）里的，文檔中說了 6 個配置，配置都可以組合起來用。我們說說最常用的三個配置。
3.1 webpackChunkName
前面舉了個非同步載入 lodash 的例子，我們最後把 output.chunkFilename 寫死成 bundle.js。在我們的業務代碼中，不可能只非同步載入一個文件，所以寫死肯定是不行的，但是寫成 [name].bundle.js 時，打包的文件又是意義不明、辨識度不高的 chunk id。
{
entry: {
index: "../src/index.js"
},
output: {
filename: "[name].min.js", // index.min.js
chunkFilename: '[name].bundle.js', // 1.bundle.js，chunk id 為 1，辨識度不高
}
}
這時候 webpackChunkName 就可以派上用場了。我們可以在 import 文件時，在 import 里以註釋的形式為 chunk 文件取別名：
async function getAsyncComponent() {
var element = document.createElement('div');
// 在 import 的括弧里 加註釋 /* webpackChunkName: "lodash" */ ，為引入的文件取別名
const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');
element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');
return element;
}
這時候打包生成的文件是這樣的：
現在問題來了，lodash 是我們取的名字，按道理來說應該生成 lodash.bundle.js 啊，前面的 vendors~ 是什麼玩意？
其實 webpack 懶載入是用內置的一個插件 SplitChunksPlugin 實現的，這個插件裡面有些預設配置項，比如說 automaticNameDelimiter，預設的分割符就是 ~，所以最後的文件名才會出現這個符號，這塊兒內容我就不引申了，感興趣的同學可以自己研究一下。
3.2 webpackPrefetch 和 webpackPreload
這兩個配置一個叫預拉取（Preload），一個叫預載入（Prefetch），兩者有些細微的不同，我們先說說 webpackPreload。
在上面的懶載入代碼里，我們是點擊按鈕時，才會觸發非同步載入 lodash 的動作，這時候會動態的生成一個 script 標簽，載入到 head 頭裡：
如果我們 import 的時候添加 webpackPrefetch：
...
const { default: _ } = await import(/* webpackChunkName: "lodash" */ /* webpackPrefetch: true */ 'lodash');
...
就會以 <link rel="prefetch" as="script"> 的形式預拉取 lodash 代碼：
這個非同步載入的代碼不需要手動點擊 button 觸發，webpack 會在父 chunk 完成載入後，閑時載入 lodash 文件。
webpackPreload 是預載入當前導航下可能需要資源，他和 webpackPrefetch 的主要區別是：
- preload chunk 會在父 chunk 載入時，以並行方式開始載入。prefetch chunk 會在父 chunk 載入結束後開始載入。
- preload chunk 具有中等優先順序，並立即下載。prefetch chunk 在瀏覽器閑置時下載。
- preload chunk 會在父 chunk 中立即請求，用於當下時刻。prefetch chunk 會用於未來的某個時刻
3.3 一句話總結：
webpackChunkName 是為預載入的文件取別名，webpackPrefetch 會在瀏覽器閑置下載文件，webpackPreload 會在父 chunk 載入時並行下載文件。
最後推薦一下我的個人公眾號：「滷蛋實驗室」，平時會分享一些前端技術和數據分析的內容，大家感興趣的話可以關註一波：
