如何优化Angular打包产物，剔除第三方库中未使用的冗余代码？

这类技术方案已经非常成熟，完全可以实现基于实际调用扫描、编译阶段自动剔除冗余代码的需求，具体可以分为JS和CSS两类处理逻辑：

1. 基础内置优化（无需额外工具） #

Angular CLI 生产构建默认已经集成了基础的摇树（Tree Shaking）和冗余代码清理能力，你可以先在angular.json的生产构建配置中开启以下开关，先做第一轮体积缩减：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "aot": true,
              "buildOptimizer": true,
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "removeUnused": true
                },
                "fonts": true
              }
            }
          }
        }
      }
    }
  }
}

开启后默认就能清理掉未使用的Angular框架代码、样式文件冗余规则，通常能让构建产物体积下降20%~40%。

2. 基于运行时覆盖率的深度清理（适配第三方库） #

就是你提到的类似Code Coverage的技术方案，通过运行时采集实际调用的代码段，在编译阶段剔除未执行的逻辑，适配jQuery这类非ESM规范、普通摇树无法处理的第三方库：

• 首先通过无头浏览器工具编写简单的自动化脚本，启动本地预览服务后遍历所有站点路由、触发所有常用交互（模态框弹出、Tooltip悬浮等），采集V8引擎输出的代码覆盖率文件，这份文件会精准标记所有实际运行过的JS、CSS代码段。
• 配置@angular-builders/custom-webpack扩展Angular默认构建流程，引入对应的清理插件分别处理JS和CSS冗余，传入上一步生成的覆盖率文件后，生产构建时会自动删除所有未被标记为执行的代码段，针对体积较大的第三方库通常能再砍掉50%以上的冗余体积。
• 注意：如果项目存在动态生成的类名、动态调用的方法，需要提前将这类标识符加入清理工具的白名单，避免功能被误删。

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