从 Angular 18.2 开始，Angular 现在支持 isolatedModules 。有了这种支持，我们发现生产构建时间的性能提高了 10% 。

我们知道开发人员喜欢性能改进，在这篇博文中，我们将解释如何在项目中利用此功能。

背景

当在 Angular 应用程序中使用 Application builder 并且启用了 isolatedModules 选项并禁用了脚本 Sourcemaps 时，TypeScript 代码将通过捆绑器进行转译，而不是使用 TypeScript 的当前行为。使用 isolatedModules 选项可确保无需类型检查器即可安全地转换 TypeScript 代码。

它有什么帮助？

启用此功能有几个优点。捆绑器（在本例中 esbuild 现在可以理解 TypeScript 代码构造（例如枚举），并且可以优化输出代码。它可以在可能的情况下内联常量枚举和常规枚举。此外，这还可以删除所有 TypeScript 代码的基于 Babel 的优化过程。

这些优化过程仍然存在于所有 JavaScript 代码中，例如来自第三方库/包的代码。这些变化导致构建时间的改进，特别是在生产配置中。

如何设置？

要在项目中启用此功能，请更新项目的 TypeScript 配置文件（通常为 tsconfig.json ，以在 compilerOptions 部分中包含 "isolatedModules": true ：

"compilerOptions": {
    ...
    "isolatedModules": true
}

注意：为了确保此设置中的最佳输出代码大小，应删除 compilerOptions 中的 useDefineForClassFields 选项或将其设置为 true ，以启用 ECMAScript 标准兼容行为。

要了解有关 TypeScript 中的 isolatedModules 功能的更多信息，请查看文档。请务必通过运行 ng update 来尝试此更新并构建出色的应用程序。

原文链接：https://blog.angular.dev/using-isolatedmodules-in-angular-18-2-68a7d3a6c03d

翻译原文：https://zhuanlan.zhihu.com/p/715453143