Webpack 打包完成后，控制台会输出一大段统计信息，很多人习惯直接忽略它，直接去看有没有 error 和 warning。其实这段日志里包含了 entry、chunk、module、asset 等多个维度的数据，其中 chunk 信息对于分析代码分割效果、排查重复依赖、优化加载性能非常有价值。stats 对象里的 chunks 选项正是用来控制是否输出这部分内容的，本文详细讲解它的用法和配套技巧。
一、stats.chunks 控制什么内容
先明确一个概念：stats 配置整体控制的是构建日志的显示粒度，而不是打包行为本身。也就是说，改 stats 不会影响产物，只会影响你在终端里看到什么。stats.chunks 是其中一个布尔值选项，默认为 true，表示在输出信息中展示每个 chunk 的列表，包括 chunk 的名称、chunk id，以及每个 chunk 关联的资源文件。
把它设为 false 之后，日志中关于 chunk 的汇总部分就会被隐藏，你只能看到 assets 列表和 module 列表，却不知道哪个模块归属哪个 chunk。反过来，如果你想排查代码分割问题，就需要确保它是 true，并同时开启 stats.chunkModules，后者控制是否显示每个 chunk 内部包含的模块明细。这两个选项经常配合使用。
下面是一个基础配置示例：
module.exports = {
// ...其他配置省略
stats: {
chunks: true, // 显示 chunk 列表
chunkModules: true, // 显示每个 chunk 内的模块
chunkOrigins: true, // 显示 chunk 的来源（哪个模块触发了拆分）
modules: true, // 显示模块列表
colors: true // 终端彩色输出
}
};其中 chunkOrigins 特别值得注意，它会告诉你某个异步 chunk 是从哪个父模块中通过 import() 拆分出来的，排查"这个 chunk 为什么会存在"时非常好用。这三个选项组合起来，基本可以覆盖日常分析 chunk 的需求。
二、用 chunksSortMode 让输出更有序
开启 chunks 输出后，默认的排序不一定符合阅读习惯。Webpack 提供了 stats.chunksSortMode 来控制 chunk 列表的排序方式，可选值包括 auto、size、id、totalSize、name、manual 等。生产环境排查体积问题时，按 size 降序排列最直观，一眼就能看到最大的 chunk 排在最前面。
配置方式如下：
module.exports = {
stats: {
chunks: true,
chunksSortMode: 'size', // 按体积排序
chunkModules: true,
moduleSortMode: 'size', // 模块也按体积排序
assetsSortMode: 'size',
excludeModules: [/node_modules/] // 可选：过滤第三方依赖让日志更清爽
}
};按体积排序的实际意义在于快速定位体积异常。例如某个业务页面 chunk 排到了主包前面，说明这个页面可能不小心引入了大体积的依赖库。如果按默认的 id 排序，这类问题很容易被淹没在长列表里。
另外提一句，chunk 的体积数字是压缩前的模块源码统计，和最终产物的文件体积并不完全一致。如果需要精确的产物体积，应该看 assets 部分，或者使用 webpack-bundle-analyzer 这类可视化工具做补充分析。
三、实战：利用 stats.chunks 排查常见问题
第一个典型场景是排查重复打包。多页面应用中，如果两个 entry 都依赖了同一个第三方库而没有做公共提取，开启 chunkModules 后你会看到同一个模块出现在多个 chunk 里。定位到具体模块后，通过 SplitChunksPlugin 配置 cacheGroups 把它提取到公共 chunk，构建日志立刻就能验证效果。
第二个场景是分析异步加载。动态 import 产生的 chunk 往往数量多、命名混乱，结合 chunkOrigins 输出，可以清楚看到每个异步 chunk 的来源模块和触发关系。例如：
// 业务代码中的动态导入 const Editor = () => import(/* webpackChunkName: "editor" */ './components/Editor.vue');
构建后日志中如果出现一个名为 editor 的 chunk，配合 origin 信息就能确认它确实来自上面这行代码，而不是被其他入口意外引入。如果发现某个异步 chunk 的体积异常大，进一步展开它的模块列表，通常能发现组件内部静态 import 了重量级依赖，比如图表库或富文本内核，这时再考虑把依赖也改成懒加载。
第三个场景是在 CI 环境中做体积监控。可以设置 stats: 'verbose' 拿到全部信息，或使用 stats: { preset: 'normal', chunks: true, chunkModules: true } 的方式基于预设微调，然后把输出交给脚本解析，超过阈值时让流水线报警。相比额外安装分析插件，直接复用 stats 输出的方案侵入性更小。
最后提醒一点：stats 还支持字符串快捷值，如 stats: 'errors-only'、stats: 'detailed'、stats: 'minimal' 等，它们等价于一组预设的布尔组合。日常开发建议用 normal 加上 chunks 相关的三个选项；调试构建问题时临时切到 verbose；生产构建则可以收窄到 errors-warnings 减少日志噪音。合理利用这些粒度控制，构建日志才能真正为优化服务。
Webpack stats.chunksChunk 信息打包分析修改时间：2026-09-11 07:32:28