在前端 web 应用程序的开发过程中，应用程序需要支持不同的国际化语言，以满足全球不同地区用户的使用需求。为了方便国际化开发，我们常常使用 Angular 的国际化模块（i18n），而 @actra-development-oss/ng-i18n-aot-module 是一个非常优秀的 npm 包，它可以帮助我们将 Angular 中的 i18n 语言文件做成 AOT 模块，提高我们前端应用的性能。本文将为大家介绍如何使用该 npm 包。
什么是 @actra-development-oss/ng-i18n-aot-module？
@actra-development-oss/ng-i18n-aot-module 是一个 Angular 应用的 i18n 文件的 AOT 模块生成器。它可以将 Angular 中使用的 i18n 语言文件通过预编译的方式打包成 AOT 模块，这可以显著提高前端应用的性能。
如何使用 @actra-development-oss/ng-i18n-aot-module
首先，在使用 @actra-development-oss/ng-i18n-aot-module 之前，需要安装 Node.js 和 npm 环境。在安装好 Node.js 和 npm 环境后，就可以使用以下命令来安装 @actra-development-oss/ng-i18n-aot-module：
npm install @actra-development-oss/ng-i18n-aot-module --save-dev
安装成功后，我们就可以开始使用 @actra-development-oss/ng-i18n-aot-module 了。下面为大家提供一个使用示例：
首先，创建一个 Angular 应用程序，并在其中使用 i18n 语言文件。例如，在 app.component.html 文件中，我们可以添加如下代码：
<div i18n="@@hello">Hello {{name}}!</div>在 app.component.ts 文件中，我们可以添加如下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ---- - -------- -
在使用 @actra-development-oss/ng-i18n-aot-module 之前，我们需要先使用 Angular 提供的 i18n 命令行工具将 i18n 语言文件提取出来。具体方法可以参考 Angular i18n 官方文档（https://angular.io/guide/i18n）。
在对 i18n 语言文件进行预编译之前，我们需要将它们移动到一个单独的目录中，并将该目录中的语言文件组织成一个合适的结构。例如，我们可以将 i18n 目录中的所有语言文件都移动到 src/i18n 目录下。在此基础上，我们还需要将语言文件组织成以下结构：
-- -------------------- ---- ------- --------- - --- ------ - --- ---------------- - --- ------------ - --- ------ - --- ---------------- - --- ------------ - --- ------ - --- ---------------- - --- ------------ ---
其中，每个子目录代表一个语言，messages.xlf 是未编译的 i18n 语言文件，messages.aot.xlf 是编译后的 AOT 模块文件。
接下来，我们可以在项目的根目录下新建一个 build-lang-aot.js 的脚本文件，内容如下所示：
-- -------------------- ---- -------
----- - ------------ - - -----------------------------------------------------
----- ----- - --------- --------- -- ----------
--- ------ ---- -- ------ -
----- ------- - --- --------------
------- ------
-------- -------------------
---- ----------
---
----------------
-在运行该脚本之前，需要确保我们已经预先安装了 @actra-development-oss/ng-i18n-aot-module 包和其他所需的依赖项，例如 xml2js。
运行以上脚本后，就可以在每个语言目录下生成编译后的 AOT 模块文件 messages.aot.xlf。此时，我们还需要在 Angular 项目的根目录下的 angular.json 文件中配置 i18n 相关的环境变量，例如：
-- -------------------- ---- -------
---
----------------- -
------------- -
------------------------- --------
------------- ------
----------- ------------------------
------------- ----
-
-
---此时，使用 ng build 命令来打包项目时，@actra-development-oss/ng-i18n-aot-module 会自动将我们预编译的 AOT 模块文件加入到构建中。在打包完成后，我们可以通过浏览器开发者工具的 Performance 分析界面来查看应用的性能数据，以验证预编译 AOT 模块对性能的提升效果。
总结
@actra-development-oss/ng-i18n-aot-module 的使用方法非常简单，只需要按照本文的步骤，正确地安装和配置该包，就可以在 Angular 应用中使用预编译的 AOT 模块，提升我们应用的性能。此外，该包的源代码非常易于阅读，开发者还可以基于它二次开发出更加定制化的 AOT 模块生成器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f79238a385564ab69a4