bundle vs chunk

[gauseen]

bundle vs chunk

1. Bundle

bundle 由许多不同的模块生成，包含对源文件编译后的最终版本。

2. Chunk

chunk 是 webpack 的特定术语，在内部用于管理捆绑过程。输出 bundle 由 chunk 组成，其中有几种类型（例如 entry 和 child ）。通常，块（chunk）与 输出束 (bundle）一一对应，但是，有些配置不会产生一对一的关系。

举个例子：

使用 Code Splitting 进行代码分割时，Webpack 将生成多个 chunk，并将它们合并成一个或多个最终的输出 bundle。这些 chunk 可能来自多个入口点，或者是异步加载的结果，因此输出 bundle 和 chunk 之间就不是一对一的关系了。

或者使用 import() 动态导入时，Webpack 可能会根据需要生成一些额外的 chunk，然后在运行时动态加载这些 chunk。这些 chunk 也不会与 bundle 一一对应。

2.1 Entry Chunk

是 Webpack 打包时指定的入口文件所生成的 chunk，它包含了所有的应用程序代码。如果有多个入口文件，则会生成多个 entry chunk。

2.2 Child Chunk

是由 Entry Chunk 生成的子 chunk，也可以是由其他 Child Chunk 经由代码分割（Code Splitting）生成的子 chunk。Child Chunk 通常是异步加载的，它们包含了应用程序中的一部分代码，且在某些情况下可能被多个 Entry Chunk 共享。在 Webpack 打包时，Child Chunk 会被合并到 Entry Chunk 中，最终生成输出文件（bundle）。

参考

• ChatGPT
• https://webpack.docschina.org/glossary/