Angular 8 with Ivy 如何验证它的使用

Posted 2023-03-24

【中文标题】Angular 8 with Ivy 如何验证它的使用

【英文标题】：Angular 8 with Ivy how to verify it is used

【发布时间】：2019-10-15 12:02:18

【问题描述】：

今天我安装了 Angular 8 最终版。

npm install -g @angular/cli

生成了一个简单的应用程序：

ng new sampleApp

在https://angular.io/guide/ivy 站点上，我发现我必须修改tsconfig.app.json 文件才能启用Ivy。像这样：

"angularCompilerOptions": 
    "enableIvy": true

我的问题是在我执行构建之后如何验证 Ivy 是否已到位并用作渲染引擎？

【问题讨论】：

我要做的是用 Ivy 做一个，一个不做，然后比较大小。肯定有更好的方法，但这个方法可以解决问题:)

不确定是否有办法，唯一的办法是检查终端上的 ng build 输出的 main.ts 文件大小

@Dino 是的，这肯定有效 :-)

@penleychan main.ts?打字稿文件？

你知道，在 ng build 之后，你会在终端上输出文件名，其中一个是 main.[chunk]... 25 kB 等

【参考方案1】：

新的渲染引擎更喜欢向许多对象添加扩展属性而不是新的包装类型。

您可以在 chrome 浏览器中打开您的应用程序并检查 Angular 应用程序中的任何元素是否具有 __ngContext__ 属性。

https://ivy.ng-run.com/

【讨论】：

这种方法也适用于 Angular 9.0.0-rc.1。刚刚测试。

运行 cli 8.3.24 以生成新项目 --enable-ivy。这似乎不再是真的了。 "无法读取未定义的属性 'ngContext'"

@Hao 还是这样

@yurzui 你是对的。再次测试。它适用于某些元素。但不是在每个元素上。

明确地说，如果您看到__ngContext__，则表示您正在使用 Ivy。

【参考方案2】：

当您将enableIvy 设置为true

...
"angularCompilerOptions": 
  "enableIvy": true

...

然后通过运行ng serve 或ng build 来执行ngcc 命令。您可以在控制台中轻松识别它，因为它会开始打印出类似这样的内容

Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

...

秒可能的方法是检查包大小，如 cmets 中所述。

Angular blog 上还有一段关于 Ivy 和 Bazel 的短文，我们将在下周获得更多关于 Ivy 的信息。

我们知道，我们即将选择加入，令人兴奋不已 预览。我们将在下周提供有关这些的个别更新 这个博客，敬请期待！

【讨论】：

是的，刚刚在打开常春藤的情况下进行了检查，我在控制台中看到了这些 Compiling @angular/core 行。谢谢。