webpack5 會(huì)自動(dòng)命名代碼塊 ID

你知道 chunkFilename 的作用嗎？了解之前，先了解懶加載，動(dòng)態(tài)導(dǎo)入的功能。

通常，一個(gè)網(wǎng)頁會(huì)有自身的側(cè)重點(diǎn)：

1、假如你在 YouTube 上加載一個(gè)視頻頁面，你更關(guān)心的肯定是視頻而不是評(píng)論。所以，這里視頻就比評(píng)論重要。

2、又比如你在一個(gè)新聞網(wǎng)站看一篇文章，你更關(guān)心的肯定是文章的文字而不是廣告。所以，這里文字就比廣告重要。

上面的這些情況，都可以通過優(yōu)先下載最重要的部分，稍后懶加載剩余部分，從而來提升頁面首次加載的性能。在 webpack 中，使用?import()?函數(shù)即可實(shí)現(xiàn)。

let btn = document.createElement('button')btn.innerHTML = '按鈕1'
btn.addEventListener('click', () => {  import('./a').then(() => {    console.log('加載完成')  })})
document.body.appendChild(btn)

import()?函數(shù)可以幫助你實(shí)現(xiàn)按需加載。

Webpack 在打包時(shí)遇到 import，就會(huì)把這個(gè)模塊放到單獨(dú)的 chunk 中：

> npx webpack
asset bundle.js 13.3 KiB [emitted] (name: main)asset src_a_js.bundle.js 860 bytes [emitted]runtime modules 7.81 KiB 10 modulescacheable modules 236 bytes  ./src/index.js 209 bytes [built] [code generated]  ./src/a.js 27 bytes [built] [code generated]webpack 5.15.0 compiled successfully in 92 ms

只有當(dāng)代碼執(zhí)行到?import()?函數(shù)時(shí)才會(huì)去下載。

這樣可以讓 入口 bundle 變得更小，從而減少首次加載時(shí)間。不僅如此，它還可以優(yōu)化緩存，如果你修改了入口 chunk 的代碼，注釋 chunk 不會(huì)受到影響。

在開發(fā)模式下，webpack5 代碼塊 ID 默認(rèn)啟用了的新命名方式，算法為模塊提供了人類可讀的名稱。在生產(chǎn)模式下默認(rèn)是數(shù)字的的形式。

比如在開發(fā)模式下文件是叫做 src_a_js.bundle.js 文件。在生產(chǎn)模式下是以 0.bundle.js 這樣的形式。而 webpack4 在生產(chǎn)和開發(fā)都是數(shù)字形式的。

所以你不再需要使用?import(/* webpackChunkName: "name" */ "module")?來調(diào)試。但如果你想控制生產(chǎn)環(huán)境的文件名，還是有意義的。

output: {  filename: 'bundle.js',  path: path.resolve(__dirname, 'dist'),  chunkFilename: '[name].bundle.js'},

通過注釋改名字

import(/* webpackChunkName: "video" */ './a').then(() => {  console.log('加載完成')})

video.bundle.js

總結(jié)：webpack5 在開發(fā)環(huán)境下會(huì)自動(dòng)命名代碼塊 ID ?？梢苑奖阄覀冋{(diào)試代碼。