Angular 15独立组件项目中如何拆分main.js为更小代码块？

1. 自定义第三方依赖拆包 #

Angular基于webpack打包，可通过自定义splitChunks配置把main.js中的第三方依赖单独拆成独立chunk。

• 新建webpack.config.js文件：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'initial',
          priority: -10
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'initial',
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

• 在angular.json中引入该配置（需先安装@angular-builders/custom-webpack）：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有其他配置
    }
  }
}

执行生产构建后，第三方依赖会被拆分到vendors.js等独立文件，直接缩减main.js体积。

2. 精准拆分Angular核心/第三方模块 #

• 避免全量引入第三方UI库（如@angular/material），只单独引入实际用到的组件模块，比如MatButtonModule、MatInputModule，而非全量的MatModule。
• 对于lodash这类工具库，改用lodash-es并按需引入单个方法，比如import debounce from 'lodash-es/debounce'，而非全量导入。

3. 独立组件的二次懒加载优化 #

即使已用独立组件，仍可能有通用全局组件（如弹窗、工具组件）被打包进main.js：

• 用动态import()方式在需要时加载组件：

// 替代静态import，改为动态引入
const GlobalModalComponent = await import('./shared/global-modal/global-modal.component').then(m => m.GlobalModalComponent);

• 把通用组件封装成独立模块，通过路由懒加载方式引入，彻底从main.js中剥离。

4. 用bundle分析工具精准定位冗余 #

运行ng build --prod --stats-json生成打包分析文件stats.json，借助webpack-bundle-analyzer工具可视化查看main.js内的体积占比，针对性拆分体积较大的模块。

5. 强化Tree Shaking效果 #

• 在tsconfig.json中确保compilerOptions的module设为es2020或更高，target设为es2020，提升webpack Tree Shaking的效率。
• 手动清理代码中已导入但未使用的模块、变量，这类冗余代码会被打包进main.js，必须删除。

6. 确认生产构建优化配置 #

检查angular.json的生产配置，确保以下优化项已开启：

"configurations": {
  "production": {
    "buildOptimizer": true,
    "optimization": true,
    "vendorChunk": true,
    "extractLicenses": true,
    "sourceMap": false
  }
}

其中vendorChunk默认开启，会自动拆分部分第三方依赖，结合自定义splitChunks能实现更灵活的拆包逻辑。

内容的提问来源于stack exchange，提问作者Will Huang