编译angular_如何在Angular混合应用中启用提前编译

最新推荐文章于 2021-02-20 10:57:16 发布

cumian8165

最新推荐文章于 2021-02-20 10:57:16 发布

阅读量277

点赞数

文章标签： java python 大数据 linux hadoop

原文链接：https://www.freecodecamp.org/news/angular-hybrid-app-ahead-of-time-compilation-204ced918ec7/

版权

编译angular

by Kamil Maraz

通过卡米尔·马拉兹(Kamil Maraz)

如何在Angular混合应用中启用提前编译 (How to enable ahead-of-time compilation in an Angular hybrid app)

以及为什么要这样做 (And why you’ll want to do this)

Ahead-of-time (AOT) compilation is a big word in the Angular community. Everybody wants to get it running. If you are starting with a new project using Angular CLI, you’ve won. There is nothing simpler than to include “ — aot” option in your terminal.

提前(AOT)编译在Angular社区中是一个大词。每个人都想让它运行。如果您使用Angular CLI开始一个新项目，那么您会成功。没有比在终端中包含“-aot”选项更简单的了。

But what if you have a custom Webpack configuration? Or you are using Upgrade module and you have a hybrid Angular application? Have a look at how we dealt with this particular problem in Admin — administration interface for Slido users.

但是，如果您具有自定义Webpack配置怎么办？或者您正在使用升级模块，并且拥有混合Angular应用程序？看看我们如何处理Admin中的这个特定问题-Slido用户的管理界面。

提前与即时 (Ahead-of-Time vs. Just-in-Time)

The difference between AOT and Just-in-Time compilation (JIT) rests in the step in which compilation happens. With AOT, we are talking about the build phase. It happens before running the application in the browser. JIT compilation is happening when the application is running in the browser.

AOT和即时编译(JIT)之间的区别在于编译发生的步骤。关于AOT，我们正在谈论构建阶段。它发生在浏览器中运行该应用程序之前。当应用程序在浏览器中运行时，将进行JIT编译。

As it is stated in the Angular guide:

正如Angular指南中所述：

“The Angular Ahead-of-Time compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.”

“在浏览器下载并运行该代码之前，Angular Ahead-of-Time编译器会在构建阶段将Angular HTML和TypeScript代码转换为高效JavaScript代码。”

One of the advantages of enabling AOT is faster application rendering. As all of the application parts are already compiled when downloaded by the browser, there is a significant decrease of bootstrap time of application as well as the rendering times during its use.

启用AOT的优点之一是更快的应用程序渲染。 由于浏览器下载时所有应用程序部分均已编译，因此应用程序的引导时间以及使用过程中的渲染时间将大大减少。

Another benefit can be a smaller bundle size. When you are using AOT, you do not need to include @angular/compiler as it is no longer needed. The compiled application can increase in its bundle size, but this strongly depends on the specifics of your application.

另一个好处是较小的捆束尺寸。 使用AOT时，由于不再需要@ angular / compiler ，因此无需添加。编译的应用程序可以增加其束大小，但这在很大程度上取决于您的应用程序的细节。

Thirdly, there is a much higher possibility to spot compilation errors in templates, as you will be notified by the compiler during build time. If you are using Visual Studio Code, you can use Angular Language Service extension as it has AOT diagnostics enabled in real-time.

第三， 在模板中发现编译错误的可能性更高，因为编译器会在构建期间通知您。如果您使用的是Visual Studio Code，则可以使用Angular Language Service扩展，因为它具有实时启用的AOT诊断功能。

启用AOT所需的步骤 (Steps necessary to enable AOT)

The first step, as it happens, is to run npm install @ngtools/webpack.

发生的第一步是运行npm install @ ngtools / webpack 。

Next, you have to configure Webpack properly. In this step, you want to configure AngularCompilerPlugin which comes with @ngtools. Using configuration parameters you will set up locations of tsconfig and entry files. Most of the time you want to use separate tsconfigs for JIT and for AOT. You will see why in a moment.

接下来，您必须正确配置Webpack。在此步骤中，您要配置@ngtools随附的AngularCompilerPlugin。使用配置参数，您将设置tsconfig和条目文件的位置。大多数时候，您想为JIT和AOT使用单独的tsconfig。一会儿您会明白为什么。

In your standard tsconfig you need to exclude main.aot.ts file, which is the entry point for applications compiled using AOT. In this file, you will import files which will be available only during the build time. This way you can separate between JIT and AOT builds easily, without any errors.

在标准tsconfig中，您需要排除main.aot.ts文件，这是使用AOT编译的应用程序的入口点。在此文件中，您将导入仅在构建期间可用的文件。这样，您可以轻松地在JIT和AOT构建之间进行区分，而不会出现任何错误。

Tsconfig for AOT is ordinary. There is nothing special about it.

用于AOT的Tsconfig很普通。没什么特别的。

Next file is here to demonstrate how we can split builds between JIT and AOT. In this case, JIT is used in a dev environment and AOT is used in the production.

这里的下一个文件演示了如何在JIT和AOT之间拆分构建。在这种情况下，在开发环境中使用JIT，在生产环境中使用AOT。

AOT uses platformBrowser instead of platformBrowserDynamic. Next important step is to import factory files which will be available during the build time.

AOT使用platformBrowser而不是platformBrowserDynamic。下一个重要步骤是导入在构建期间可用的工厂文件。

性能提升 (Performance improvements)

From the start, we wanted to have AOT enabled for a reason — to have better performance of Admin application. This is a short comparison of what improved and what remained the same:

从一开始，我们就想启用AOT是有原因的-为了提高Admin应用程序的性能。这是对改进之处和保持不变之处的简短比较：

As you can see, the initial load time significantly decreased even when the bundle size increased slightly.

如您所见，即使捆绑包的尺寸略有增加，初始加载时间也大大减少了。