如何查看Webpack Bundle Analyzer中router.js+12 Modules的具体内容？

开发者阿泽

2026-5-19

解决Webpack Bundle Analyzer中router.js无法展开"12 Modules"的问题

嘿，这个问题我之前也碰到过，给你几个实用的办法来找出这12个模块的具体内容：

生成详细的Stats文件再分析
直接用Angular CLI构建时生成包含完整打包信息的stats文件，执行命令：
```
ng build --prod --stats-json
```
构建完成后，dist目录下会多出一个stats.json文件。接着用Webpack Bundle Analyzer加载这个文件：
```
webpack-bundle-analyzer dist/stats.json
```
这种方式生成的报告通常能展示更完整的模块层级，之前无法展开的"12 Modules"大概率就能点击查看详情了。
检查Angular路由的懒加载配置
router.js里的额外模块基本都是你配置的懒加载路由模块。打开你的app-routing.module.ts，查看所有用loadChildren方式引入的模块，比如：
```
{
  path: 'dashboard',
  loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
}
```
数一下这类懒加载模块的数量，如果刚好是12个，那这些就是你要找的模块了。
配置Webpack以输出更详细的打包信息
可以借助Angular的@angular-builders/custom-webpack插件自定义Webpack配置，添加一个webpack.config.js文件，写入：
```
module.exports = {
  stats: {
    detailed: true,
    modulesSort: 'size'
  }
};
```
然后修改angular.json里的构建配置，指定使用这个自定义Webpack文件。重新构建后，Bundle Analyzer就能展示更细致的模块拆分内容。