面试题：Angular CLI中构建优化相关指令及实践

Question

Angular CLI 中有哪些指令可以用于优化构建过程，如减小打包体积、提高加载速度等？请举例说明如何在实际项目中运用这些指令进行构建优化。

Answer 1

1. --prod 指令

• 作用：启用生产模式构建，在构建过程中会进行一系列优化，包括移除未使用的代码（摇树优化）、压缩代码、优化资源加载等，有效减小打包体积并提高加载速度。
• 实际运用：在项目根目录下运行 ng build --prod 命令。例如，对于一个简单的 Angular 项目，在命令行中输入该指令后，Angular CLI 会对项目进行生产环境优化构建，生成优化后的 dist 文件夹，里面的文件即为部署到生产环境可用的资源。

2. --aot 指令（ Ahead - of - Time Compilation，提前编译）

• 作用：在构建时将 Angular 组件和模板编译为 JavaScript 代码，而不是在浏览器运行时编译。这样可以减少运行时的编译开销，加快应用的启动速度，同时也能减小打包体积。
• 实际运用：在构建命令中添加 --aot 选项，如 ng build --prod --aot 。项目在构建时，Angular CLI 会按照提前编译的规则对组件和模板进行编译，生成优化后的代码。

3. --vendorChunk 指令

• 作用：将第三方依赖库打包到一个单独的文件（vendor chunk）中。这样当应用的业务代码更新时，只要依赖库版本不变，浏览器可以复用缓存的 vendor chunk 文件，提高加载速度。
• 实际运用：在 angular.json 文件的 architect.build 配置中设置 "vendorChunk": true ，然后运行 ng build --prod 。构建完成后，在 dist 文件夹中会看到独立的 vendor 文件，浏览器加载应用时可以更好地利用缓存机制。

4. --sourceMap 指令

• 作用：虽然开启 sourceMap 会增加打包文件的大小，但在开发和调试阶段，它可以帮助开发者快速定位到原始代码中的错误位置。在生产环境，若关闭 sourceMap ，可减小打包体积。
• 实际运用：在生产环境构建时，将 --sourceMap 设置为 false ，如 ng build --prod --sourceMap=false 。这样构建出来的文件不包含 sourceMap 相关信息，文件体积会相应减小。