`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 載入時並行下載文件。
最後推薦一下我的個人公眾號:「滷蛋實驗室」,平時會分享一些前端技術和數據分析的內容,大家感興趣的話可以關註一波: