Angular12已配置全组件懒加载但打包后main.js文件过大求助

1. 优化第三方依赖引入逻辑 #

• 避免全量导入重型库：针对Primeng、Angular Material、CKEditor这类大型组件库，不要在根模块/根共享模块中全量导入所有组件，仅按需引入当前需要使用的组件模块，例如仅需使用Primeng按钮时，仅导入ButtonModule即可。
• 低频次重型库改为动态导入：对于仅在特定业务场景使用的重型库（如jspdf、html2canvas、webex等），不要在文件顶部直接import，改为在调用时动态引入，写法如下：

// 仅在触发导出PDF逻辑时加载jspdf
const { jsPDF } = await import('jspdf')

该方式会将这类库从main.js中拆分出来，仅在实际使用时异步加载。

2. 校验懒加载配置有效性 #

• 确认路由配置全部采用loadChildren写法引入业务模块，禁止在根模块/AppModule中直接导入任何业务模块，正确懒加载写法示例：

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

• 精简根共享模块内容：根共享模块仅存放全项目90%以上页面都会用到的通用组件、服务，仅在特定业务模块使用的内容需下沉到对应业务模块中，避免无关代码被打包进main.js。

3. 调整构建与编译配置 #

• 优化生产构建命令，修改package.json中build字段为：

"build": "ng build --configuration=production --build-optimizer --aot --vendor-chunk --common-chunk"

其中--vendor-chunk会将第三方依赖单独打包为vendor.js，避免和业务代码混在main.js中；--common-chunk会抽离多个懒加载模块共用的代码为单独公共包，减少重复打包。

• 调整tsconfig.json配置：
  • 将compilerOptions.sourceMap改为false，生产环境无需sourceMap可大幅减少打包体积
  • 将compilerOptions.skipLibCheck改为true，跳过类库类型检查不影响运行，同时可加快构建速度

4. 清理冗余依赖 #

你的项目同时引入多套UI组件库是体积过大的核心原因：

• 当前dependencies中同时存在Angular Material、原生Material组件、ng-bootstrap、Primeng四套UI相关依赖，存在大量功能重复，优先保留一套常用UI库，删除其余未使用的UI依赖，该步可降低至少30%的打包体积。
• 把@types/file-saver、@typescript-eslint/eslint-plugin、@typescript-eslint/parser这类类型定义、代码检查相关的包从dependencies移动到devDependencies中，这类依赖不需要参与生产打包。

5. 部署层面优化 #

部署时开启Nginx/CDN的gzip压缩，js、css等文本资源压缩后体积可降至原体积的1/4左右，大幅降低首屏加载耗时。

内容的提问来源于stack exchange，提问作者Akash Gupta