Angular懒加载未生成chunk.js，如何确认懒加载是否正常工作？

嘿，我来帮你理清这个问题～

首先：Angular 4+是会生成chunk.js的 #

你没在Sources标签看到chunk.js，大概率是这两个原因：

• 还没触发懒加载时机：你的懒加载路由是/cars，只有当你实际导航到/cars这个路由时，浏览器才会去请求对应的chunk文件。如果登录后只是停留在首页或者其他非懒加载路由，自然不会加载cars模块的chunk。
• 找错了查看位置：chunk文件加载时，优先看浏览器的Network标签（而不是Sources），在Network的JS分类下，你导航到/cars时会看到一个新的JS请求，文件名通常是类似0.chunk.js（Angular 4-8左右的命名风格）或者带模块名的chunk文件。Sources标签里要等chunk加载完成后才会显示对应的模块内容。

怎么确认你的懒加载是否正常工作？ #

给你几个实用的验证方法：

1. 触发路由导航，看网络请求
   登录后手动跳转到/cars路由，打开浏览器开发者工具的Network标签，过滤JS文件。如果看到新的JS文件加载（不是初始加载的那些），说明懒加载已经生效了。
2. 查看生产构建输出
   执行命令ng build --prod，去项目的dist文件夹里看，你会发现除了主文件（比如main.xxxxxx.js），还有对应懒加载模块的chunk文件，比如cars.xxxxxx.js之类的，这就证明构建阶段已经把懒加载模块拆分出来了。
3. 监听Router事件验证
   在你的AppComponent里添加一段代码，监听路由加载事件：

   import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router';
   
   constructor(private router: Router) {
     this.router.events.subscribe(event => {
       if (event instanceof RouteConfigLoadStart) {
         console.log('开始加载懒加载模块:', event.route.path);
       }
       if (event instanceof RouteConfigLoadEnd) {
         console.log('懒加载模块加载完成:', event.route.path);
       }
     });
   }
   

   当你导航到/cars时，控制台会打印对应的日志，直接证明懒加载在工作。
4. 检查你的路由配置
   你的APP_ROUTES配置是对的，Angular 4+支持loadChildren: 'app/cars/cars.module#CarsModule'这种字符串语法（后续版本推荐箭头函数写法，但4+完全兼容），只要你的CarsModule里正确配置了CarsRoutingModule并导出，路由部分是没问题的。

另外补充：开发模式下ng serve的懒加载chunk是按需生成的，不会提前打包，所以只有当你访问对应路由时才会生成并加载，这也是你一开始没看到的原因之一。

内容的提问来源于stack exchange，提问作者Robert Daraż