Angular新引擎lvy的特性介绍

2021年11 月 4 日,Angular 团队宣布 Angular 13 发布。该版本核心更新包括不再支持旧编译和渲染引擎 View Engine,全面支持新编译和渲染引擎 lvy,以及不再支持 IE11。这意味着和我一样前端框架是用的angular的将会有必须使用lvy渲染器了。

1、什么是lvy

官网称lvy是下一代渲染和编译的通道。lvy可以说是angular渲染引擎的重写。Angular 本身运行时的性能相当不错,但加载时间较长,因为文件较大,影响了应用程序的整体性能。随着lvy的发布,提供了以前不可用的高级功能。它即使在速度较慢的网络中,加载速度也非常快。

2、为什么要用lvy

lvy打包大小对比

以上图片是同一个项目在不同angular版本用不同的编译方案编译后的大小。

2.1、较小的捆绑尺寸

通过摇树删除未使用的angular部分,并为每个angular组件生成更少的代码。

2.2、更快的测试

angular项目每次运行都会编译所有组件,而lvy只会编译修改的部分。调试起来更加方便。

2.3、改进的 CSS 类和样式绑定

Ivy 编译器和运行时为处理样式提供了改进。以前,如果应用程序包含一个样式的竞争定义,这些样式会破坏性地相互替换。使用 Ivy,样式以可预测的方式合并。

2.4、改进的类型检查

Angular 编译器可以检查应用程序的更多类型,并且可以应用更严格的规则。这些功能将帮助您和您的团队在开发过程的早期发现错误。

2.5、改进了构建错误

新的 Ivy 编译器不仅速度更快并提供更强的类型安全性,还使所有错误消息更易于阅读。

2.6、改进了构建时间,默认情况下启用 AOT

默认情况下使用了预编译,构建速度明显加快。

2.7、改进的国际化

通过在构建过程的后期移动构建时 i18n 替换来加快速度。