前置知识
定义
是打包过程中生成的一个代码块。
每个块都相当于一个模块的集合，这些模块在打包过程中被组织在一起。
作用
- 模块组织：将相关模块组织到一个代码块中，便于管理和优化。
- 代码分割：通过拆分 chunk，将不常用的代码分割到单独的 chunk 中，实现按需加载，减少初始加载时间。
- 热更新：通过哈希值确保只有修改的模块需要重新加载。
- 缓存优化：公共 chunk 可以独立缓存，提升性能。
通过splitChunks提取公共模块，减少重复代码。
- 打包优化：通过分析 chunk 的大小、依赖关系，优化打包策略。
使用webpack-bundle-analyzer等工具，可查看 chunk 的大小和模块组成，进行分析。
- 给特定文件进行特定命名，在打包 worker 之类的特殊文件比较有用。
通过chunkFilename配置输出文件的命名规则。
与最终产物文件的关系
关系
若无配置影响，每个 chunk 会被生成一个独立的文件，不过在进行配置之后，可以将多个 chunk 组合为一个文件。
影响因素
取决于：
- 入口文件
- 代码分割策略
- 依赖关系的组织方式
| 影响因素 | 值 | 效果 |
|---|---|---|
| entry | 单入口 | webpack会从指定的所有入口点出发，分析依赖关系，将所有相关模块合并到一个 chunk ，最终打包为一个文件 |
| 多入口 | 每个入口文件都会生成一个独立的 chunk。每个 chunk 包含对应入口文件及其依赖模块，最终打包为多个文件 | |
| 代码分割生成额外 chunk | 通过动态导入（import()）或splitChunks配置，可以将代码分割为额外的 chunk。 | - 动态导入的模块会生成一个独立的 chunk，按需加载。 |
splitChunks配置可以提取公共模块到单独的 chunk 中，减少重复代码。 |
类别
根据生成方式和作用，chunk 可以分为以下类型
入口 chunk
与 入口的关系
每一个入口对应一个 入口 chunk 。
定义
由入口文件直接生成的 chunk，是打包流程的起点、构建流程的开端。
webpack 会从入口 chunk 开始，识别和处理项目中的依赖关系，把所有相关模块整合到一个或多个 chunk 中。
入口 chunk 的生成决定了后续打包任务的走向，它为后续的模块解析、加载、编译和优化等操作提供了基础。
组成
包含入口文件及其依赖模块。
例如：entry: './src/index.js'生成的main.js文件。
普通 chunk
定义
由非入口模块的依赖关系生成的 chunk。
组成
包含项目中其他模块的代码。
例如：通过import()动态加载的模块生成的0.js文件。
初始 chunk
包含在页面初始加载时必须执行的代码的 chunk ，可能包含动态生成的模块。
