先搬运一下官方文档的内容
Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
The application builder uses the webpack build tool, with default configuration options specified in the workspace configuration file (angular.json) or with a named alternative configuration. A “production” configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the --configuration="production" or the --prod="true" option.
Some additional options can only be set through the configuration file, either by direct editing or with the ng config command. These include assets, styles, and scripts objects that provide runtime-global resources to include in the project. Resources in CSS, such as images and fonts, are automatically written and fingerprinted at the root of the output folder.
选项
—aot
Build using Ahead of Time compilation
默认值 flase
AOT是Ahead of Time compile 的缩写，顾名思义提前编译。
与AOT相对的则是JIT(Just in time),翻译成中文就是即时编译。
Angular 应用主要由组件及其 HTML 模板组成。由于浏览器无法直接理解 Angular 所提供的组件和模板，因此 Angular 应用程序需要先进行编译才能在浏览器中运行。Angular 提供了
两种方式来编译angular应用程序：
- 即时编译 (JIT,Just in time)，它会在运行期间在浏览器中编译你的应用。
- 预先编译（AOT,Ahead of time)，它会在构建时编译你的应用。
注：当你运行 ng build（仅编译）或 ng serve（编译并启动本地服务器） 这两个 CLI 命令时 JIT 编译是默认选项；要进行 AOT 编译，只要让 ng build 或 ng serve 命令中包含 --aot 标志。
AOT:在浏览器下载和运行代码之前的编译阶段，Angular 预先（AOT）编译器会先把你的 Angular HTML 和 TypeScript 代码转换成高效的 JavaScript 代码。好处如下：
- 渲染得更快：使用 AOT浏览器下载预编译版本的应用程序。 浏览器直接加载运行代码，所以它可以立即渲染该应用，而不用等应用完成首次编译；
- 需要的异步请求更少：编译器把外部 HTML 模板和 CSS 样式表内联到了该应用的 JavaScript 中。 消除了用来下载那些源文件的 Ajax 请求；
- 需要下载的 Angular 框架体积更小：如果应用已经编译过了，自然不需要再下载 Angular 编译器了。 该编译器差不多占了 Angular 自身体积的一半儿，所以，省略它可以显著减小应用的体积；
- 提早检测模板错误：AOT 编译器在构建过程中检测和报告模板绑定错误，避免用户遇到这些错误；
- 更安全：AOT 方式会在发给客户端之前就把 HTML 模板和组件编译成 JavaScript 文件。 不需要读取模板，也没有客户端组装 HTML 或执行 JavaScript 的危险操作，受到注入类攻击的机会也比较少。
—commonChunk
Use a separate bundle containing code used across multiple bundles.
使用单独的bundle ，其中包含跨多个bundle 使用的代码。 模块中的复用部份,以削减打包的代码量,
默认值： true
—experimentalRollupPass
Concatenate modules with Rollup before bundling them with Webpack.
在使用Webpack捆绑模块之前，将模块与Rollup连接起来。
默认值： false
—extractCss
Extract css from global styles into css files instead of js ones.
从全局样式中将css提取到css文件而不是js文件中。
默认值： false
—extractLicenses
Extract all licenses in a separate file.
默认值： false
—ngswConfigPath
Path to ngsw-config.json.
—buildOptimizer
Enables ‘@angular-devkit/build-optimizer’ optimizations when using the ‘aot’ option.
使用’aot’选项时启用’@ angular-devkit / build-optimizer’优化。
默认值： false
编译后进一步压缩文件的大小（通过移除未使用的代码）
所谓Rollup是指Webpack2会把那些应用中未使用的引用代码除掉，但不会删除这些代码，所以就需要配合 UglifyJs 能够智能的移除这些未使用的代码。从而减少包体大小。 而Agnular应用是基于Typescript，因此Angular Cli提供了一个叫 Angular Build Optimizer 插件，将 Typescript 编译结果转化成更友好的UglifyJs版本。这样UglifyJs就能够更有效的移除那些未使用的代码。
Angular Cli只需要加上
--build-optimizer参数就可以，在一些情况下压缩的还是很厉害的。作者：cipchk
链接：https://segmentfault.com/a/1190000010981919
来源：SegmentFault 思否
—optimization
Enables optimization of the build output.
启用构建输出的优化。
—prod
Shorthand for “—configuration=production”. When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination.
“ —configuration = production”的简写。 如果为true，则将构建配置设置为生产目标。 默认情况下，生产目标是在工作空间配置中设置的，因此所有构建都使用捆绑，有限的树状摇动以及有限的死代码消除。
angular-cli会把用不到的包都删掉
—progress
Log progress to the console while building.
—resourcesOutputPath
The path where style resources will be placed, relative to outputPath.
相对于outputPath放置样式资源的路径。
—showCircularDependencies
Show circular dependency warnings on builds.
默认值： true
以上的部分配置，都可以在angular.json的配置中找到，所以不需要在命令行中再写
若有收获，就点个赞吧
0 人点赞
