Angular 15.2工作区：如何为每个库生成独立打包文件？

要实现每个库独立打包并按需加载，需要调整Angular CLI的默认打包策略，同时优化Webpack的SplitChunks配置，具体步骤如下：

1. 调整Angular CLI构建配置 #

在angular.json的build选项中，禁用默认的公共chunk和供应商chunk，确保自定义Webpack配置能完全生效：

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

2. 修改Webpack SplitChunks配置 #

更新webpack.config.js，禁用默认缓存组，给每个库的缓存组设置高优先级并强制提取：

module.exports = {
  optimization: {
    splitChunks: {
      // 禁用默认的缓存组，避免干扰自定义规则
      default: false,
      defaultVendors: false,
      cacheGroups: {
        library1: {
          test: /[\\/]projects[\\/]library1[\\/]/,
          name: 'library1',
          chunks: 'all', // 匹配所有类型的chunk（同步/异步），确保所有依赖library1的模块复用同一chunk
          priority: 10, // 设置高于默认规则的优先级
          enforce: true // 强制提取，忽略Webpack默认的最小体积等限制
        },
        library2: {
          test: /[\\/]projects[\\/]library2[\\/]/,
          name: 'library2',
          chunks: 'async', // 仅匹配异步懒加载的chunk（moduleB、moduleC）
          priority: 10,
          enforce: true
        }
      }
    }
  }
};

配置说明 #

• 禁用默认缓存组：default和defaultVendors是Webpack默认的公共chunk规则，会将共享代码打包到common.js，必须禁用才能让自定义规则生效。
• library1的chunks: 'all'：由于moduleA、B、C都依赖library1，设置为all会将library1提取为独立chunk，无论访问哪个路由，只要加载过一次就会缓存，无需重复下载。
• library2的chunks: 'async'：仅moduleB和C依赖library2，设置为async确保它只会在加载这两个懒加载模块时被下载，访问/a路由时不会加载无用的library2代码。
• priority与enforce：确保自定义缓存组优先级高于任何默认规则，强制Webpack按照配置提取chunk，忽略默认的最小体积、最小引用次数等限制。

验证效果 #

执行ng build --prod（或开发模式ng serve）后，查看生成的chunk文件：

• 访问/a时，网络请求仅包含moduleA.js和library1.js
• 访问/b时，网络请求包含moduleB.js和library2.js（若library1.js已缓存则不会重复加载）
• 访问/c时，网络请求包含moduleC.js，复用已缓存的library1.js和library2.js

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