[toc]
# 什么是 chunk？
chunk ，翻译成中文是 “大量，一块” 的意思，在 webpack 中打包之后生成的每个 JS 文件就是一个 chunk（一般打包之后只生成一个 JS 文件，但如果使用了 `多入口`、`动态引入` 等技术时会生成多个打包文件）。
生成多个 chunk （打包文件）的技术也叫做 `代码分割`。
代码分割的代码可以实现 `按需加载` 以提高性能。
# 代码分割的三种情况
## 多入口
如果配置了多个入口文件，那么在生成时会生成多个 chunk。
~~~json
entry: {
index: './src/index.js',
abc: './src/abc.js'
},
output: {
path: resolve(__dirname, './dist'),
filename: '[name].[chunkhash:6].js',
clean: true
}
~~~
以上配置在执行 `npx webpack` 命令打包时，会打包输出两个 JS 文件，每个文件叫做一个 chunk。
## 动态引入
如果使用了 `import()` 函数来引入模块，那么被引入的模块会被单独打包成一个 chunk，然后在使用时动态加载。
~~~js
// 动态加载
import(/* webpackChunkName: 'car' */ './Car').then(res => {
res.helloCar()
})
~~~
动态加载时可以通过 `/* webpackChunkName: 'xxx' */` 来指定生成的 chunk 的文件名。
## 提取公共库
当多个文件都引入了同一个模块时，比如，有两个文件都引入了 `jquery` ，那么在打包时 jquery 会被同时打包到两个文件中。为了优化我们可以开启 `代码分割` 功能，把公共的模块（jquery）单独打包到一个文件中，其他模块要使用时直接引入。
配置文件中添加：
~~~json
optimization: {
splitChunks: {
chunks: 'all',
}
}
~~~
