Angular CLI如何实现Build ？

八股文_Angular面试题 0 227

参考回答

在 Angular 项目中，使用 Angular CLI 进行构建（build）是非常常见的操作。以下是实现 Build 的步骤：

运行 Build 命令：
进入项目根目录后执行：
```
ng build
```
Bash
这个命令会在 dist/ 文件夹中生成构建后的文件，默认是开发模式。
生产环境构建：
构建用于部署的生产环境文件：
```
ng build --prod
```
Bash
--prod 参数会开启优化选项，例如代码压缩、Tree Shaking、懒加载等。
自定义 Build 配置：
通过 angular.json 文件，可以指定额外的构建选项，如不同的环境或输出路径：
```
ng build --configuration=<environment>
```
Bash
例如：
```
ng build --configuration=staging
```
Bash
指定输出路径：
如果想更改生成的文件夹路径：
```
ng build --output-path=custom-folder
```
Bash

详细讲解与拓展

1. Angular Build 的流程

Angular CLI 的 Build 实现主要包括以下步骤：
– 解析和编译：使用 AOT（Ahead of Time）或 JIT（Just in Time）编译模板。默认情况下，--prod 会使用 AOT 编译。
– Tree Shaking：通过移除未使用的代码减少最终的文件体积。
– 代码优化：包括压缩代码、优化 CSS 和 HTML、移除冗余注释等。
– 生成输出文件：最终生成静态文件，通常包括 HTML 文件和 JavaScript/CSS 文件。

2. 生产环境优化的特点

执行 ng build --prod 时，会启用以下优化：
– AOT 编译：提前将模板编译成 JavaScript，减少浏览器运行时的开销。
– Tree Shaking：移除无用的代码。
– 代码压缩：通过 Uglify 压缩工具优化 JavaScript 文件。
– CSS 优化：合并并压缩 CSS 文件。
– 懒加载：将路由模块分离为独立的文件，按需加载。

构建命令示例：

ng build --prod --output-hashing=all

--output-hashing=all：对输出的文件名加哈希值，便于缓存控制。

3. 自定义构建选项

通过修改 angular.json 文件，可以自定义构建选项：

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true
  }
}

常用选项：
– optimization：启用文件优化。
– sourceMap：是否生成 Source Map 文件，生产环境通常禁用以保护源码。
– extractCss：将 CSS 提取到单独文件，而不是内联到 HTML 中。

4. 适用场景扩展

多环境构建：
Angular 支持根据环境文件生成不同配置。例如，environment.prod.ts 和 environment.dev.ts。
命令示例：
```
ng build --configuration=production
```
Bash

Docker 中使用 Build：
在 CI/CD 流程中，可以通过 Docker 镜像执行 Angular Build：

FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build --prod

5. 实际案例

假设有一个 Angular 项目需要构建为生产模式，输出文件存放到 build/ 文件夹，命令如下：

ng build --prod --output-path=build --source-map=false

生成后的 dist/build 文件夹会包含：
– index.html：入口文件。
– main.<hash>.js：主 JavaScript 文件。
– styles.<hash>.css：样式文件。

总结

Angular CLI 提供了强大的构建工具，能够通过简单的命令生成优化后的生产文件。通过合理配置 angular.json，可以实现多环境支持和定制化构建流程，为部署前端项目提供了高效的解决方案。