Angular11懒加载大型Reveal BI库时ng build构建失败如何解决

方案一：使用Angular CLI原生scripts配置（无额外依赖，推荐） #

Angular CLI 支持对引入的第三方脚本单独配置构建规则，你可以把RevealBI相关的依赖直接在angular.json中声明为懒加载 bundle，同时关闭该 bundle 的 sourceMap 生成，完全不影响业务代码的 sourceMap 配置：

1. 修改angular.json中architect > build > options > scripts配置：

"scripts": [
  {
    "input": "node_modules/dayjs/dayjs.min.js",
    "bundleName": "reveal-deps",
    "lazy": true,
    "sourceMap": false
  },
  {
    "input": "node_modules/quill/dist/quill.min.js",
    "bundleName": "reveal-deps",
    "lazy": true,
    "sourceMap": false
  },
  {
    "input": "node_modules/reveal/infragistics.reveal-1.0.4.js",
    "bundleName": "reveal-deps",
    "lazy": true,
    "sourceMap": false
  }
]

2. 删除原有reveal-deps.ts文件，原有懒加载逻辑无需大改，直接动态导入配置的 bundle 即可：

import("reveal-deps")
    .then(() => {
        // 原有RevealBI相关逻辑保持不变
    });

该方案会直接将三个已经压缩过的库打包为独立的懒加载 chunk，Angular CLI 不会对其做二次优化、也不会生成 sourceMap，构建速度会恢复正常，业务代码的 sourceMap 不受任何影响。

方案二：自定义Webpack配置（适配复杂场景） #

如果你的依赖引入逻辑有自定义需求，可以通过扩展Webpack配置实现对指定 chunk 的优化屏蔽：

1. 安装对应Angular 11版本的自定义构建器依赖：

npm i @angular-builders/custom-webpack@11 @angular-builders/dev-server@11 -D

2. 修改angular.json的构建器配置：

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

3. 在项目根目录新建extra-webpack.config.js，内容如下：

module.exports = {
  // 单独拆分RevealBI相关依赖为独立chunk
  optimization: {
    splitChunks: {
      cacheGroups: {
        revealDeps: {
          test: /[\\/]node_modules[\\/](dayjs|quill|reveal)[\\/]/,
          name: 'reveal-deps',
          chunks: 'async',
          priority: 100,
        }
      }
    }
  },
  // 不对RevealBI相关依赖处理sourceMap
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
        exclude: /[\\/]node_modules[\\/](dayjs|quill|reveal)[\\/]/
      }
    ]
  },
  // 仅非RevealBI的chunk生成sourceMap
  devtool: (info) => info.chunk.name === 'reveal-deps' ? false : 'source-map'
};

4. 原有懒加载逻辑和reveal-deps.ts无需修改，直接正常构建即可。

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