Angular CLI-ng build命令

概述

Angular CLI是一个常用的用于创建、测试和部署Angular应用程序的命令行接口工具。其中，ng build命令用于编译和构建Angular应用程序，生成适合发布到生产环境的静态文件。

用法

在终端中运行以下命令，即可使用ng build命令：

ng build

默认情况下，ng build命令会使用默认的build配置文件，将Angular应用程序编译为静态文件，并将这些文件保存在名为dist的目录中。

如果需要使用其他配置文件，可以通过--configuration选项指定。例如，以下命令将使用名为staging的配置文件编译应用程序：

ng build --configuration=staging

配置文件

Angular CLI使用一组配置文件来控制ng build命令的行为。这些配置文件存储在angular.json文件中，其中包含多个名为build的配置项，每个配置项对应一个命令配置。可以通过在命令行中传递--configuration选项来选择要使用的配置。

以下是angular.json配置文件中build配置项的示例：

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
        "outputPath": "dist/angular-demo",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
            "src/favicon.ico",
            "src/assets"
        ],
        "styles": [
            "src/styles.css"
        ],
        "scripts": []
    }
}

其中，builder属性指定使用的构建工具，options属性包含了构建相关的配置信息，如输出路径、入口文件、Polyfills等。

高级用法

除了上面提到的简单用法，ng build命令还支持一些高级用法。

AOT编译

默认情况下，ng build命令会使用JIT（Just In Time）编译器编译Angular应用程序。但是，JIT编译器会影响应用程序性能，特别是在移动设备上。

为了提高性能，可以将Angular应用程序编译为AOT（Ahead Of Time）模式。在 AOT 模式下，应用程序会更快地加载和运行，因为大部分应用程序在构建时就已经编译为原生 HTML 和 JavaScript 了。

要将应用程序编译为AOT模式，可以在ng build命令中添加--aot选项：

ng build --aot=true

生产模式

当应用程序准备发布到生产环境时，需要使用生产模式编译和构建应用程序。生产模式会使用 Tree Shaking 技术减少应用程序体积，从而提高性能。

要使用生产模式编译和构建应用程序，可以在ng build命令中添加--prod选项：

ng build --prod

打包分析

在打包应用程序时，可能会有一些不必要的依赖文件或模块，这些文件可能会影响应用程序的性能和加载时间。可以使用webpack-bundle-analyzer插件来分析应用程序的打包结果，找出应用程序的问题，并对其进行优化。

要使用webpack-bundle-analyzer插件分析应用程序的打包结果，可以在ng build命令中添加--stats-json选项：

ng build --stats-json

然后执行以下命令，即可分析和可视化应用程序的打包结果：

webpack-bundle-analyzer dist/angular-demo/stats.json

总结

以上就是Angular CLI-ng build命令的介绍，包括了命令的用法、配置文件、高级用法等多个方面。使用ng build命令可以方便快捷地编译和构建Angular应用程序，并准备将其发布到生产环境。