webpack的chunkFilename详细说明

你知道chunkFilename的作用吗？了解之前，先了解懒加载，动态导入的功能。

通常，一个网页会有自身的侧重点：

1、假如你在 YouTube 上加载一个视频页面，你更关心的肯定是视频而不是评论。所以，这里视频就比评论重要。

2、又比如你在一个新闻网站看一篇文章，你更关心的肯定是文章的文字而不是广告。所以，这里文字就比广告重要。

上面的这些情况，都可以通过优先下载最重要的部分，稍后懒加载剩余部分，从而来提升页面首次加载的性能。在 webpack 中，使用 import() 函数即可实现。

let btn = document.createElement('button')
btn.innerHTML = '按钮1'

btn.addEventListener('click', () => {
  import('./a').then(() => {
    console.log('加载完成')
  })
})

document.body.appendChild(btn)

import() 函数可以帮助你实现按需加载。Webpack 在打包时遇到 import，就会把这个模块放到单独的 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 modules
cacheable 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

只有当代码执行到 import() 函数时才会去下载。

这样可以让 入口 bundle 变得更小，从而减少首次加载时间。不仅如此，它还可以优化缓存，如果你修改了入口 chunk 的代码，注释 chunk 不会受到影响。

在开发模式下，webpack5 代码块 ID 默认启用了的新命名方式，算法为模块提供了人类可读的名称。 在生产模式下默认是数字的的形式。

比如在开发模式下文件是叫做 src_a_js.bundle.js 文件。在生产模式下是以 0.bundle.js 这样的形式。而 webpack4 在生产和开发都是数字形式的。

所以你不再需要使用 import(/* webpackChunkName: "name" */ "module") 来调试。 但如果你想控制生产环境的文件名，还是有意义的。

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

通过注释改名字

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

video.bundle.js

总结：webpack5 在开发环境下会自动命名代码块 ID 。