更快地重建 Angular 应用程序

mstmahmuda11121

除了将 Angular 特定代码转换为高效且高性能的 JavaScript 代码之外，编译器还提供其他几种功能。例如，它还执行静态代码分析，除了检查数据类型之外，还确保对象实际上具有您尝试调用它的属性。 确切的过程超出了本文的范围。为了更深入地了解，我推荐 上发表的演讲“深入研究 Angular 编译器”。生成的代码另外被压缩、缩小并变得不可读，并作为上面提到的 JavaScript 包传递到 Web 浏览器。 缩小 JavaScript 包 开发新的 Angular 编译器的主要原因之一是减少这个包的大小。因此，为了理解为什么 Angular Ivy 能够生成更小的 JavaScript 包，我们需要仔细查看生成的 JavaScript 代码。默认情况下您必须使用 ViewEngine 作为 Angular 编译器，并且 Ivy 只能作为可选选项使用，而 Angular 9 现在将 Ivy 作为标准编译器。


如何将现有的 Angular 项目升级到新版本可以在Angular 官方文档中找到。为了进行第一个简单的比较 华侨资料 我使用 Angular Version 9 创建了一个新项目，并使用 Ivy 和 ViewEngine 编译了一次。 我们使用 Angular 9 的示例项目的 Package.json 要使用 Ivy 编译这个项目，我所要做的就是从 Angular 应用程序的根目录中手动调用 Angular 编译器： 能够使用 ViewEngine 编译相同的项目，我首先必须在tsconfig.json的CompilerOptions中停用Ivy。通过再次调用编译器，我收到了ViewEngine编译的JavaScript代码。 两个编译器的直接比较表明，新的 Angular 编译器实现了它的承诺（编译器采用非缩小或压缩格式）。在我们的示例项目中，使用 Ivy 生成的代码比其前身生成的代码几乎小 50%。




使用的编译器 src/文件夹的大小 视图引擎 92KB 常春藤 50KB 如果您查看生成的文件，您还可以看到 ViewEngine 为我们的AppComponent生成了四个不同的文件（两个 JavaScript 和两个 JSON 文件） ，而 Ivy 仅创建一个 JavaScript 文件。 图 1 使用 Ivy 渲染引擎的 Angular 应用程序 - ViewEngine 从组件生成两个 JavaScript 文件和两个 JSON 文件 使用 ViewEngine，可以从一个组件生成两个 JavaScript 文件和两个 JSON 文件 图 2 使用 Ivy 渲染引擎的 Angular 应用程序 - 使用 Ivy 仅生成一个 JavaScript 文件 使用 Ivy，只生成一个 JavaScript 文件 由ViewEngine生成的app.component.js仅包含我们组件的控制器代码。我们可以在app.component.ngfactory.js中找到构建 HTML 结构的所有说明。