角度的实际应用_如何优化生产的角度应用

最新推荐文章于 2024-05-29 15:01:30 发布

郝ren

最新推荐文章于 2024-05-29 15:01:30 发布

阅读量314

点赞数

文章标签： python java 人工智能算法

原文链接：https://medium.com/javascript-in-plain-english/how-to-optimize-your-angular-application-for-production-e80537f1c9e

版权

角度的实际应用

Delivering quality software goes far beyond writing good code. In order to achieve high-quality user experience the way you ship and deliver your Angular application is of vital importance.

提供高质量的软件远远超出编写好的代码的范围。为了获得高质量的用户体验，您的运输和交付Angular应用程序的方式至关重要。

The main aim of this guide is to show you how you can deliver a robust and high-quality Angular application. You achieve this by optimizing the application for production during the build process.

本指南的主要目的是向您展示如何交付健壮且高质量的Angular应用程序。您可以通过在构建过程中优化生产应用程序来实现这一目标。

介绍 (Introduction)

Building your Angular application with the Angular CLI is pretty straight forward. Simply run the following command from your workspace directory.

使用Angular CLI构建Angular应用程序非常简单。只需从您的工作区目录中运行以下命令。

ng build

The ng build command compiles your angular code and places it in the dist folder by default. For a development build this is okay, however, it does not make the mark for a production build.

ng build命令将编译您的角度代码并将其默认放置在dist文件夹中。对于开发版本，这是可以的，但是，这并不能为生产版本打上烙印。

The build command takes several options, we will look at some of the important ones in the sections below.

build 命令有几个选项，我们将在下面的部分中介绍一些重要的选项。

基本生产 (Basic production build)

At the very basic, you should run your build command with the --prod option. The --prod option will do the following:

从根本--prod ，您应该使用--prod选项运行build命令。 --prod选项将执行以下操作：

Simple tree-shaking
简单的摇树
Removes dead code from your application
从应用程序中删除无效代码
Sets the production environment variables
设置生产环境变量

Note:--prod is a shorthand for --configuration=production. Therefore the --prod will set your application to point to the production environment variables, which by default are found in environment.prod.ts file.

注意：-- --prod是--configuration=production的简写。因此，-- --prod会将您的应用程序设置为指向生产环境变量，默认情况下，该变量位于environment.prod.ts文件中。

You can build your application for production with the basic optimizations using the command below.

您可以使用以下命令通过基本优化来构建用于生产的应用程序。

ng build --prod

提前进行时间编译(AOT) (Ahead of Time Compilation (AOT))

When you build your Angular application, it uses Just in Time Compilation (JIT) by default. This means that your Angular application is compiled inside the browser at runtime. As you can imagine this can be slow.

当您构建Angular应用程序时，默认情况下它会使用即时编译(JIT)。这意味着您的Angular应用程序是在运行时在浏览器中编译的。可以想象，这可能很慢。

To take your build optimization a level further, you can build your Angular production code using Ahead of Time Compilation (AOT). With AOT, your Angular application is compiled at build-time, that is before it gets to the browser. Here are some reasons why you should use AOT.

为了进一步提高构建优化的水平，您可以使用Ahead of Time Compilation(AOT)来构建Angular生产代码。使用AOT，您的Angular应用程序会在构建时即到达浏览器之前进行编译。这是您应使用AOT的一些原因。

AOT的优势 (Advantages of AOT)

Faster rendering of code because the compilation is done at build-time and not in the browser at runtime
由于编译是在构建时完成的，而不是在运行时在浏览器中完成的，因此代码渲染速度更快
Smaller Angular application size because the Angular compiler is not shipped with the code
较小的Angular应用程序大小，因为该代码未附带Angular编译器
Better code quality because template parse errors are detected early during the build
更好的代码质量，因为在构建的早期就检测到了模板解析错误
Secure and robust since templates are not evaluated dynamically in the browser
安全且强大，因为不会在浏览器中动态评估模板

One minor setback with AOT is that your build process or CI/CD pipeline might take a bit longer to complete.

AOT的一个小小的挫折是您的构建过程或CI / CD管道可能需要更长的时间才能完成。

Build your application with AOT using the --aot=true option as follows.

使用--aot=true选项使用AOT构建应用程序，如下所示。

ng build --prod --aot=true

角度构建优化器 (Angular build-optimizer)

You can further optimize your Angular application for production using the --buildOptimizer option

您可以使用--buildOptimizer选项进一步优化Angular应用程序以进行生产

The build optimizer removes Angular specific decorators, constructor parameters and makes it easier for code minifiers to remove unused code.

构建优化器删除了Angular特定的装饰器，构造函数参数，并使代码缩小器更易于删除未使用的代码。

ng build --prod --aot=true --buildOptimizer=true

Note: The --buildOptimizer option only works for AOT compiled code.

注意：-- --buildOptimizer选项仅适用于AOT编译代码。

分析构建输出 (Analysis of the build outputs)

In this section, I compare and analyze the outputs of the build process for an application that I have been working on.

在本节中，我将比较并分析我一直在处理的应用程序的构建过程的输出。

The first figure is the output of a non-optimized production build whereas the second figure is the output of an optimized production build.

第一个数字是未优化生产版本的输出，而第二个数字是优化生产版本的输出。

As you can see the polyfills, highlighted in red, add up to 797 KB in the first figure whereas, the polyfills for the optimized build add up to only 165 KB. A staggering 79% reduction.

如您所见，以红色突出显示的polyfill在第一张图中的总和为797 KB ，而用于优化构建的polyfill的总和仅为165 KB 。惊人地减少了79％ 。

For the style sheets, highlighted in orange. In the first figure they add up to 2.5 MB whereas, in the optimized build, they add up to 171 KB. Representing a 93% decrease.

对于样式表，以橙色突出显示。在第一个图中，它们总共增加了2.5 MB，而在优化的版本中，它们总共增加了171 KB 。代表减少了93％ 。

As we highlighted earlier, optimized builds take longer to build. The very last line in the two figures shows how much time the build took. The non-optimized build took about 60% less time to complete.

如前所述，优化的构建需要更长的时间。这两个图中的最后一行显示了构建花费了多少时间。未优化的构建花费的时间减少了约60％ 。

1.未优化的生产结构 (1. Non-optimized production build)

Image for post — non-optimized production build

2.优化生产 (2. Optimized production build)

结论 (Conclusion)

Optimizing your Angular application build is not only important for good user experience but also good for security and delivering high-quality Applications.

优化Angular应用程序构建不仅对获得良好的用户体验很重要，而且对于安全性和交付高质量的应用程序也很重要。