Angular CLI v6下如何禁用生产构建tree-shaking以支持动态加载自定义库？

针对你遇到的场景——构建需要动态加载构建阶段未知且不可用的自定义库的Angular应用，同时要避免Tree-Shaking导致第三方符号缺失的问题，我来给你梳理可行的解决方案：

首先明确：Angular CLI v6支持在生产构建中禁用Tree-Shaking #

Tree-Shaking是Angular CLI生产构建默认开启的优化之一，但针对你的动态加载场景，确实需要禁用它（或者调整相关优化策略），否则Webpack会移除主应用未显式引用的Angular、RxJS等符号，导致后续动态加载的库运行时找不到依赖而报错。

方案一：通过Angular CLI配置直接禁用相关优化 #

最简单的方式是修改项目根目录下的angular.json配置文件，针对生产构建关闭优化项：

1. 找到你的项目对应的architect > build > configurations > production节点
2. 修改以下配置：

"production": {
  "optimization": false,
  "buildOptimizer": false,
  "vendorChunk": true
}

• optimization: false：关闭Webpack的所有优化（包括Tree-Shaking）
• buildOptimizer: false：关闭Angular特有的构建优化（它会配合Tree-Shaking做更激进的代码移除）
• vendorChunk: true：将第三方依赖打包为单独的vendor chunk，确保动态加载的库能访问到这些依赖

方案二：自定义Webpack配置精准禁用Tree-Shaking #

如果你不想完全关闭所有优化，只想针对性禁用Tree-Shaking，可以通过自定义Webpack配置实现：

1. 先安装自定义构建器依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json中的构建器配置，将默认的@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser，并指定自定义配置文件路径：

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

3. 在项目根目录创建custom-webpack.config.js，添加以下配置来禁用Tree-Shaking：

module.exports = {
  optimization: {
    // 禁用未使用导出的分析（Tree-Shaking的核心依赖）
    usedExports: false,
    // 关闭副作用分析，确保所有代码都被保留
    sideEffects: false
  }
};

方案三：将第三方依赖设为外部资源（更优的体积控制方案） #

如果不想因为禁用Tree-Shaking导致主应用体积过大，可以把Angular、RxJS等常用第三方库设为外部依赖，让动态加载的库共享全局环境中的这些依赖：

1. 在index.html中通过CDN引入这些库的UMD版本（示例）：

<script src="https://cdn.jsdelivr.net/npm/@angular/core@6.1.10/bundles/core.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rxjs@6.6.7/bundles/rxjs.umd.js"></script>

2. 在自定义Webpack配置中添加externals配置，告诉Webpack不要打包这些依赖，而是引用全局变量：

module.exports = {
  externals: {
    '@angular/core': 'ng.core',
    'rxjs': 'rxjs'
  }
};

这种方式既能避免Tree-Shaking导致的符号缺失，又能有效控制主应用的打包体积。

注意事项 #

• 禁用Tree-Shaking会导致主应用打包体积有所增加，建议结合vendorChunk或外部依赖方案平衡体积与功能需求
• 动态加载的自定义库建议采用UMD格式，确保能正确识别全局环境中的第三方依赖

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