Angular项目不适用懒加载时如何拆分main.js降低初始加载耗时

1. 依赖包拆分与瘦身 #

• 拆分第三方公共依赖：配置Angular构建的分包规则，将不常更新的第三方依赖（如Angular核心库、RxJS、第三方UI组件库等）从main.js中抽离到独立的vendor.js包，还可进一步按依赖类型拆分出polyfills.js、工具类库.js等独立bundle，避免业务代码变更导致全量缓存失效
• 非首屏依赖动态导入：对体积大、仅特定场景才会用到的依赖采用动态导入加载，无需路由懒加载即可实现代码拆分，示例写法：

// 仅当触发对应操作时才加载依赖，不会打入main.js
loadChart() {
  import('echarts').then(({ init }) => {
    init(this.chartDom.nativeElement).setOption(this.option)
  })
}

• 剔除冗余依赖：使用webpack-bundle-analyzer分析bundle组成，移除未使用的依赖，将大体积依赖替换为轻量替代方案，比如用date-fns替代moment.js、按需引入lodash-es代替全量引入lodash

2. Angular构建配置优化 #

• 开启生产构建全量优化：确保angular.json生产构建配置中buildOptimizer、aot、vendorChunk均设为true，开启Tree Shaking自动删除未使用的代码，同时自动将Angular运行时代码与业务代码拆离
• 自定义拆包规则：在angular.json的architect.build.configurations.production.optimization.splitChunks节点下配置自定义分包策略，设置最小拆分体积、公共依赖提取阈值，将使用次数≥2次的公共模块统一抽离到common.js包，避免重复打入main.js
• 独立组件级拆包：如果项目使用Angular14+的独立组件（Standalone Component），可直接对非首屏的独立组件配置单独chunk，无需路由配置即可实现组件粒度的代码拆分

3. 加载侧性能优化 #

• 开启资源压缩：服务端对所有js资源开启gzip或brotli压缩，通常可将js体积降低60%以上，大幅减少传输耗时
• 资源预加载策略：首屏必须的bundle配置<link rel="preload">提前加载，非首屏的拆分bundle配置<link rel="prefetch">在浏览器空闲时预加载，不会阻塞首屏渲染
• 启用HTTP/2多路复用：拆分后的多个小bundle可并行加载，避免HTTP1.1的队头阻塞问题，加载效率远高于单个大体积main.js

内容的提问来源于stack exchange，提问作者Harun Or Rashid