如何使用webpack将大型Angular模块拆分为更小代码块

不需要大幅重构现有巨型模块代码，仅通过构建配置调整即可实现产物拆分，具体可落地的方案如下：

基础配置校验（零代码改动） #

首先确认Angular构建配置的基础开关是否打开，这部分是CLI内置能力，不需要额外改代码：

• 打开angular.json中生产环境构建配置，确认optimization、commonChunk参数设为true，如果之前手动关闭了vendorChunk也一并打开，这一步会自动将Angular核心库、RxJS等通用第三方依赖从业务代码中拆分到独立chunk。
• 如果项目使用的是Angular CLI 12+版本，默认已经开启基础的splitChunks拆分，先跑一次生产构建看产物大小，如果仍有单包体积过大的情况，再加自定义拆分规则。

自定义Webpack拆包规则 #

如果基础拆分达不到要求，可以通过@angular-builders/custom-webpack扩展Webpack配置（不需要eject全量配置，改动量仅涉及构建配置文件），在自定义Webpack配置中添加精细化的splitChunks规则，全程不需要改动业务模块代码：

// 自定义webpack.extra.config.js
module.exports = {
  optimization: {
    runtimeChunk: 'single', // 单独抽离Webpack运行时代码，避免业务代码改动导致第三方包缓存失效
    splitChunks: {
      chunks: 'all',
      minSize: 200 * 1024, // 超过200KB的模块才参与拆分
      maxSize: 500 * 1024, // 单chunk最大体积设为500KB，超过则自动拆分
      cacheGroups: {
        // 单独抽离重型第三方依赖，比如UI库、图表库
        heavyDeps: {
          test: /[\\/]node_modules[\\/](@angular|rxjs|ng-zorro-antd|echarts|lodash-es)[\\/]/,
          name: 'vendor-heavy',
          priority: 20,
          reuseExistingChunk: true
        },
        // 自动拆分巨型模块下的组件，按组件目录生成独立chunk
        giantModuleComponents: {
          test: /[\\/]app[\\/]your-target-giant-module[\\/]/, // 替换为你的巨型模块实际路径
          name(module) {
            const pathSegments = module.context.split(/[\\/]/);
            const componentDirName = pathSegments[pathSegments.length - 1];
            return `gm-${componentDirName}`;
          },
          priority: 10,
          minChunks: 1,
          reuseExistingChunk: true
        }
      }
    }
  }
}

配置完成后修改angular.json中的构建builder为@angular-builders/custom-webpack:browser，并在对应构建配置下指定customWebpackConfig.path为上述配置文件路径即可。

最小改动的路由级懒加载兜底 #

如果构建层自动拆分的粒度仍不符合要求，可以只修改路由表配置实现按需拆包，不需要改动组件内部逻辑：

• Angular 14+版本支持直接在路由中用loadComponent懒加载独立组件，配合Webpack魔法注释指定chunk名，对应路由访问时才会加载组件代码：

const routes: Routes = [
  {
    path: 'biz-page-1',
    loadComponent: () => import(/* webpackChunkName: "gm-biz-page1" */ './giant-module/components/biz-page1/biz-page1.component')
      .then(mod => mod.BizPage1Component)
  }
]

• 低版本Angular可以在巨型模块内部按路由维度切分轻量子模块，仅在路由层做loadChildren配置，不需要改动组件本身的依赖引用。

注意事项 #

• 不要把maxSize阈值设得过低，否则会产生过多细碎chunk，因HTTP请求数量增加拖慢页面加载速度，gzip前单chunk体积控制在300KB-500KB是比较合理的区间
• 拆分完成后验证生产构建的产物hash是否正常，确认第三方依赖chunk不会随业务代码改动变更hash，保证浏览器缓存命中率
• 所有配置调整完后必须在生产模式下构建测试，开发模式的构建产物不做代码压缩和拆分优化，不具备参考性

内容的提问来源于stack exchange，提问作者No One