[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',
}
}
~~~
