Angular 13执行ng serve时未显示Lazy Chunk Files区块
问题环境
Angular CLI: 13.3.7 | Angular: 13.3.11
开发过程中已完成懒加载模块开发,经浏览器Network面板验证懒加载功能正常生效,但执行ng serve时,CLI构建日志未展示「Lazy Chunk Files」区块,当前增量构建输出内容如下:
✔ Browser application bundle generation complete. Initial Chunk Files | Names | Raw Size main.js | main | 66.30 kB | runtime.js | runtime | 12.64 kB | 4 unchanged chunks Build at: 2022-06-25T19:00:02.364Z - Hash: b8c52f9db784f32e - Time: 842ms √ Compiled successfully.
自行验证结果:注释懒加载模块相关路由代码后,构建日志显示「3 unchanged chunks」,取消注释则显示「4 unchanged chunks」,可确认CLI已正常识别懒加载模块,初步怀疑是angular.json缺少配置项导致懒加载区块不显示,期望构建输出可正常展示Lazy Chunk Files区块。
原因说明
这不是配置缺失问题,是Angular CLI 13.3.x版本的默认日志输出逻辑:
- 仅全量冷构建场景(首次启动
ng serve、修改模块拆分/路由规则触发完整重编译、执行ng build命令),才会在日志中打印完整的Initial Chunk Files、Lazy Chunk Files明细 - 日常开发修改普通业务代码触发的增量构建(日志出现
X unchanged chunks提示的场景),CLI会做日志精简,只输出发生变更的初始chunk信息,不会重复打印无变动的懒加载chunk明细,属于版本自带的优化逻辑,不是功能故障。
你当前观察到的chunk计数差异、浏览器Network面板的懒加载请求结果,已经可以100%确认懒加载拆分、运行都正常,不需要额外调整配置。
查看Lazy Chunk Files区块的方法
如果需要查看懒加载chunk的名称、体积明细,用以下任意一种方式触发全量构建即可:
- 终止当前运行的
ng serve进程,重新执行ng serve启动,首次冷构建的日志中会展示完整的chunk列表,包含Lazy Chunk Files区块 - 直接执行
ng build(开发环境可追加--configuration development参数),构建日志会完整列出所有初始chunk、懒加载chunk的明细信息 - 若需要每次增量构建都显示全量chunk列表,可启动时追加禁用缓存参数:
ng serve --no-cache,但会明显降低增量构建速度,日常开发不建议使用。
注:公开资料里带Lazy Chunk Files的构建日志示例,均为冷构建或全量build场景的输出,和你当前增量构建的日志表现不冲突。
内容的提问来源于stack exchange,提问作者user17169022
相关产品推荐
相关产品推荐

