Angular配置懒加载后打包仅生成main.js无懒加载chunk文件问题排查

常见原因及修复步骤 #

• 根模块重复引入懒加载模块 #

  检查AppModule的imports数组，确认没有手动引入IndexPageModule、UserModule这类配置为懒加载的模块。懒加载模块不需要在根模块预导入，手动引入后会被直接打包进main.js，不会单独拆分chunk。

• 错误加载路由模块而非业务模块 #

  你当前user路由的loadChildren直接加载的是UserRoutingModule，这是错误写法。正确逻辑应为：懒加载指向业务模块（如UserModule），路由模块UserRoutingModule作为业务模块的依赖，在业务模块的imports数组中导入即可。修正后配置参考：

  {
    path: 'user',
    loadChildren: () => import(/* webpackChunkName: "user" */ './pages/module/user/user.module').then(m => m.UserModule)
  }
  

• TS配置不支持动态import语法 #

  检查tsconfig.json中compilerOptions配置：
  1. module字段需设置为ESNext（或ES2020及以上支持动态import的版本），如果配置为CommonJS会导致动态import被转译为同步加载，不会拆分chunk
  2. 如果开启了removeComments: true，会删除webpack的魔法注释，可能导致chunk命名失效（一般不会完全不生成chunk，仅会生成数字命名的chunk），按需关闭即可

• 打包配置异常 #

  检查angular.json对应项目的build配置，确认没有自定义强制合并chunk的配置，保持默认配置即可。如果是开发环境执行ng serve默认不会拆分懒加载chunk，可执行生产打包命令验证：

  ng build --configuration production
  

内容的提问来源于stack exchange，提问作者แบงค์