Webpack 的 module、chunk、bundle 分别是什么?

先理解原理和示例,再练习完整口述与追问。

源码依赖单元、构建组织单元、输出产物;入口、动态导入和拆分;不保证一一对应。

module 是构建器识别的依赖单元,可来自 JS、CSS 或经 Loader 处理的其他资源。chunk 是构建过程中把模块组织为可加载部分的单位,可由入口、动态导入和分包策略形成。bundle 常指最终输出的打包文件,但一个 chunk 可能产生 JS、CSS 等多个资源,多模块也可进入同一产物,因此这些名词不是文件扩展名的简单替换。

首页入口依赖组件 A/B,动态 import 图表 C。构建器可生成入口 chunk、异步图表 chunk,以及提取的共享依赖与 runtime。用户首次只需要入口相关资源,点击图表再取异步部分;公共库到底拆在哪里由策略和阈值决定,需看分析报告。

分包不是越碎越好,可能增加请求、调度与运行时映射开销。Tree Shaking 是模块图与副作用分析,不等同于把文件改成多个 chunk。

module 描述依赖单元,chunk 描述构建组织与加载边界,bundle/asset 是输出。理解这三层后,再用入口、动态导入和共享拆分分析为什么某代码进入首屏、哪些缓存会失效。