前言
在进行 Angular 2+ 开发时，我们常常需要通过 Ahead-Of-Time (AOT) 编译来优化应用的性能。基于 AOT 编译的应用，在服务端渲染和移动端性能较弱的场景下都有很好的表现。而 ngc-webpack 这个 npm 包正好可以帮助我们快速地集成 AOT 编译到 Webpack 中。
本文将会详细介绍 npm 包 ngc-webpack 的使用方法，并在文章的最后提供一个完整的示例代码，帮助读者更好的理解和掌握该工具的使用。
安装 ngc-webpack
使用 npm 命令即可安装该包：
npm install ngc-webpack --save-dev
配置 webpack.config.js
在 webpack.config.js 中进行如下配置：
-- -------------------- ---- -------
----- ---------- - -----------------------
-------------- - -
-- ------
------ ----------------
-- ------
------- -
----- ----------------------- --------
--------- ---------------
--
-- --- -
------- -
------ -
-- --- -
-- -- ----------- ---------
-
----- --------
---- ------------- --------------------------- -------------------------
--
-
--
-------- -
-- -- ----------- --
--- -----------------------------
-------- ----
--
--
-- --- -
--以上配置中，我们添加了一个名为 NgcWebpackPlugin 的插件，并将其加入了 Webpack 的插件列表中。在插件中，我们对 disable 参数设置了 !AOT，这个参数将在 AOT 编译时起到作用，下面将详细阐述。
编译 Angular 应用
在 package.json 中添加以下 scripts：
{
"scripts": {
"start": "ng serve",
"build": "ng build",
"build-aot": "webpack --config webpack.config.js --progress --profile --bail --display-error-details --env.prod --env.aot",
"test": "ng test"
}
}其中，build-aot 是我们的 AOT 编译命令。
当我们执行以下命令时：
npm run build-aot
我们便会启动 AOT 编译。如果我们将 disable 参数设置为 false，那么此时将会启动 AOT 编译；反之，则会使用 JIT 编译。这对于开发过程中的调试非常有帮助。
示例代码
以下是一个使用 ngc-webpack 编译的示例代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ----------- -------- ---------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- --
以上代码片段中，我们使用了 NgModule 装饰器，通过该装饰器将 BrowserModule 和 AppComponent 这两个类连接到了一起，最终形成了一个完整的应用。当我们使用 ngc-webpack 进行 AOT 编译时，ngc-webpack 将会对我们的代码进行分析和优化，从而更好的提高应用性能。
结语
通过阅读本文，相信读者已经初步掌握了 ngc-webpack 的使用方法。在实际项目的开发中，无论是服务端渲染还是移动端开发，ngc-webpack 都将会对应用性能的提升做出重要的贡献。如果读者在使用过程中遇到任何问题，欢迎在评论区与我们进行讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad30b5cbfe1ea0610bf9