Angular编译打包相关

> 参考：

> * [A Deep, Deep, Deep, Deep, Deep Dive into the Angular Compiler](https://indepth.dev/a-deep-deep-deep-deep-deep-dive-into-the-angular-compiler/)
* https://www.google.com/search?q=What+the+Angular+compiler+does&oq=What+the+Angular+compiler+does&aqs=chrome..69i57.79j0j7&sourceid=chrome&ie=UTF-8
* https://stackoverflow.com/questions/46670430/what-does-the-angular-compiler-compile#:~:text=The%20job%20of%20the%20view,to%20instantiate%20a%20view%20instance.
* https://www.npmjs.com/package/@angular-builders/custom-webpack
* https://github.com/angular/angular-cli
* https://limeii.github.io/2019/08/angular-compiler/

# Angular编译器做了什么？

https://limeii.github.io/2019/08/angular-compiler/

Angular是一个基于TypeScript的框架，浏览器不能直接运行。

Angular编译器的作用就是将Angular组件、指令、TypeScript代码、html模板文件编译为浏览器可识别的JavaScript代码。而Webpack则将引入的外部依赖和Angular包进行打包。

# Ivy编译器（v9）

## Ivy简介
> 参考：

> * [Version 9 of Angular Now Available — Project Ivy has arrived!](https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3)

Ivy编译器是Angular三年来最大的一次更新，相对于之前的View Engine编译器主要有如下转变：

**1. 打包更小**

Ivy编译器会删除未使用的代码，并为每个Component生成更少的代码。Ivy对于不同复杂程度的应用的改善如下。

小型应用在Tree Shaking中受益最大（使用的外部依赖的模块较少）；中型应用在Tree Shaking中受益最小，组件也不够多；大型应用组件多，组件生成的代码受益最大。

![](https://leanote.com/api/file/getImage?fileId=5edf3eeaab64412c360007a2)

**2. 测试更快**

之前，`TestBed`将在每次测试运行之间重新编译所有组件，而不管对组件是否进行任何更改（例如，通过覆盖）。

在Ivy中，TestBed除非手动覆盖了组件，否则不要在测试之间重新编译组件，这使它避免了大多数测试之间的重新编译。

通过此更改，框架的核心验收测试速度提高了`约40％`。我们希望用户看到自己的应用程序测试速度快`40-50％`。

**3. 改建的类型检查**

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

**4. 构建时的错误提示更友好**

之前：

![](https://leanote.com/api/file/getImage?fileId=5edf4199ab64412c360007cf)

之后：

![](https://leanote.com/api/file/getImage?fileId=5edf4199ab64412c360007d0)

**5. 构建速度更快**

对于Angular官网（angular.io），使用Ivy后，构建速度提高了近`40％`。

## Ivy基准测试

>参考：

>* [Version 9 of Angular Now Available — Project Ivy has arrived!](https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3)
* [Angular with Ivy — Build performance review]( https://medium.com/angular-in-depth/angular-with-ivy-build-performance-review-5d27bd322bc5)
* [Angular Ivy performance comparison](https://stefanescueduard.github.io/2020/02/19/angular-ivy-perfomance-comparison/)

### 我的测试
自己的demo项目（5000行）Ivy性能测试（不准确，有较多干扰因素，多次测试选择数字较稳定的三条）：

1. Ivy编译
速度：36693ms，大小：4.43M
速度：36735ms，大小：4.43M
速度：35742ms，大小：4.43M

2. View Engine编译
速度：43398ms，大小：4.45M
速度：42310ms，大小：4.45M
速度：44827ms，大小：4.45M

### 网上测试

**示例1：大型项目，13w行代码，800个Component，140个延迟加载模块。**

1. 构建大小
![](https://leanote.com/api/file/getImage?fileId=5edf5158ab64412c3600089c)
2. 构建速度
![](https://leanote.com/api/file/getImage?fileId=5edf5057ab64412a38000889)

**示例2：小型项目，11个页面**

只需要关注橙色（View Engine）和黄色（Ivy），另外两个是使用压缩算法对打包压缩的的测试。

1. 构建大小
![](https://leanote.com/api/file/getImage?fileId=5edf5417ab64412a380008b7)

2. 构建速度
![](https://leanote.com/api/file/getImage?fileId=5edf5486ab64412c360008c5)

## Ivy主要功能

> 参考：[A look at major features in the Angular Ivy version 9 release](https://indepth.dev/a-look-at-major-features-in-the-angular-ivy-version-9-release/)

## Ivy兼容性

Angular 9.x之前的库使用ViewEngine编译器打包。参考：https://angular.cn/guide/ivy-compatibility

pop6 's Notes

导航

最近发表

友情链接