Angular小博客

分享让你更聪明

[译2024]在 Angular 18.2 中使用isolatedModules

浏览:3次 日期:2024年10月29日 7:55:23 作者:admin

从 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