Angular 构建：Angular CLI 与生产构建

Angular CLI 极大简化了从开发到部署的流程，但其构建系统（底层基于 Webpack 或 Esbuild，取决于 Angular 版本）的默认设置与生产环境的最优配置之间存在显著差异。理解两者的区别并正确配置生产构建，是提升应用性能和用户体验的关键步骤。

1. 理解 Angular 构建流程

在开始操作前，需理解构建的流水线过程。无论是开发还是生产，CLI 都执行以下核心步骤：

上图展示了代码从源码到浏览器可执行资源的转化过程。开发环境注重速度和调试便利性，而生产环境则专注于体积和加载效率。

2. 开发环境构建

开发环境构建是默认的构建模式，主要用于本地调试。它保留了源码结构以便断点调试，且未进行代码压缩，构建速度最快。

1. 打开终端或命令行工具。
2. 进入项目根目录。
3. 执行以下命令启动构建：

ng build

4. 观察终端输出。默认情况下，CLI 会在 dist/ 项目文件夹下生成构建产物。
5. 检查生成的 main.js 文件。你会发现它体积较大，且代码格式与源码相似，未经过混淆或压缩。

3. 生产环境构建

生产环境构建是应用上线前的必要步骤。它通过一系列优化技术（如 AOT 预编译、Tree-shaking 摇树优化、代码压缩）大幅减小应用体积，提升加载速度。

3.1 执行生产构建

1. 执行带有 --configuration production 参数的命令：

ng build --configuration production

注：在旧版本或简写中，也可以使用 ng build --prod。

2. 等待构建完成。相比于开发构建，这个过程耗时更长，因为 CLI 需要进行额外的语法分析和优化。
3. 对比生成的 dist/ 目录中的文件大小。你会发现 main.js 等文件体积显著减小，通常只有开发环境的几分之一。

3.2 核心优化机制详解

生产构建自动启用了以下关键优化，无需手动配置：

• AOT (Ahead-of-Time) 编译：在构建阶段将 HTML 模板和组件 TypeScript 代码编译为高效的 JavaScript 代码。这消除了浏览器的编译步骤，显著提升首屏渲染速度。
• Tree-shaking (摇树优化)：这是一种去除死代码的技术。构建器会分析应用的实际依赖图，剔除那些被导入但从未被使用的代码。
• 代码压缩与混淆：删除所有空格、注释，并将变量名替换为简短的字符（如 a, b, c），进一步减小文件体积。

4. 配置构建选项

默认的生产构建能满足大多数需求，但通过 angular.json 可以进行细粒度控制。

4.1 修改预算限制

Angular 默认设置了文件大小预算警告（Warning）和错误限制。当打包后的文件超过阈值时，构建会报错或提示。

1. 打开项目根目录下的 angular.json 文件。
2. 定位到 projects -> [你的项目名] -> architect -> build -> configurations -> production -> budgets 节点。
3. 修改 maximumError 或 maximumWarning 的数值以调整阈值。

示例配置片段：

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "2kb",
    "maximumError": "4kb"
  }
]

4.2 环境变量配置

在实际项目中，通常需要区分开发、测试和生产环境的 API 地址。

1. 创建新环境文件，如 src/environments/environment.prod.ts。
2. 定义生产环境变量：

export const environment = {
  production: true,
  apiUrl: 'https://api.production.com'
};

3. 确认 angular.json 中的 fileReplacements 配置。在生产构建配置下，CLI 会自动将 environment.ts 替换为 environment.prod.ts。

5. 本地预览生产构建

直接双击 dist/index.html 往往无法正确运行，因为生产构建使用了绝对路径或模块加载策略。需要通过 HTTP 服务器进行预览。

1. 安装轻量级 HTTP 服务器（仅需安装一次）：

npm install -g http-server

2. 进入构建输出目录：

cd dist/[你的项目名]

注意：[你的项目名] 通常指 angular.json 中 projects 字段下的名称。

3. 启动服务器：

http-server

4. 打开终端显示的本地地址（通常是 http://127.0.0.1:8080）访问应用。

6. 开发与生产构建对比表

下表总结了两种模式的关键差异，帮助你在不同场景下做出正确选择。

7. 常见问题排查

7.1 构建后页面空白

这通常是路径问题。如果你的应用部署在子目录下（如 http://example.com/my-app/），而非根目录。

1. 打开 angular.json。
2. 修改 projects -> architect -> build -> options -> baseHref 字段：

"baseHref": "/my-app/"

3. 重新执行生产构建命令。

7.2 内存溢出 (Out of Memory)

在大型项目中，Node.js 进程可能会耗尽内存。

1. 更新 package.json 中的构建脚本。
2. 增加 Node 的内存限制：

"scripts": {
  "build": "node --max_old_space_size=4096 ./node_modules/@angular/cli/bin/ng build"
}

3. 运行 npm run build 替代直接使用 ng build。

8. 部署前的最终检查

在将 dist 目录上传到服务器之前，请务必执行最后一步验证：

1. 运行生产构建命令。
2. 检查终端输出中是否包含黄色警告或红色错误。即使构建成功，警告信息（如预算超支）也可能暗示潜在的性能问题。
3. 使用 Lighthouse 或 WebPageTest 等工具对本地 http-server 预览的地址进行性能评分。