角元素/ Zone.js事件侦听器减慢首页

Question

我们有一个角7项目，生成一个自定义元素与角元素。这个自定义元素用于React项目和AngularJS项目中。当在其中一个项目中加载自定义元素的代码时，站点的速度会减慢约30% --即使未将自定义元素呈现到DOM中！

性能分析表明，经常调用来自invokeTask()和runTask()的zone.js方法。

我试图将事件列入黑名单，就像在https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md中描述的那样，但这没有任何效果。

packages.json中的依赖项是：

"dependencies": {
    "@angular/animations": "^7.2.7",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^7.2.7",
    "@angular/compiler": "^7.2.7",
    "@angular/core": "^7.2.7",
    "@angular/elements": "^7.2.7",
    "@angular/forms": "^7.2.7",
    "@angular/http": "^7.2.7",
    "@angular/material": "^7.3.3",
    "@angular/platform-browser": "^7.2.7",
    "@angular/platform-browser-dynamic": "^7.2.7",
    "@angular/router": "^7.2.7",
    "@angular/upgrade": "^7.2.7",
    "compass-mixins": "^0.12.10",
    "core-js": "^2.5.4",
    "dateformat": "^3.0.2",
    "devextreme": "^18.2.6",
    "devextreme-angular": "^18.2.6",
    "devextreme-intl": "^18.2.6",
    "in-view": "^0.6.1",
    "jquery": "^3.0.0",
    "keycode": "^2.1.9",
    "lodash": "^4.17.5",
    "material-design-icons": "^3.0.1",
    "moment": "^2.22.2",
    "muuri": "0.5.4",
    "ng2-nouislider": "^1.7.13",
    "nouislider": "^12.1.0",
    "reflect-metadata": "^0.1.12",
    "rxjs": "6.4.0",
    "rxjs-compat": "^6.0.0-rc.0",
    "zone.js": "^0.9.0"
  },

因此，我的问题是:即使在DOM中没有呈现自定义元素，为什么zone.js要监听事件呢？怎样才能让网站再次变得更快？

更新：我也尝试将ChangeDetection设置为onPush，但问题仍然存在。

Answer 1

我不会接触ZoneJS设置，因为它会严重影响角度本身。

我对一个组件也有类似的体验，每次创建时都会放慢速度，因为存在循环依赖。我的猜测是，您的代码中有一些东西(更可能是依赖项)会导致生成多个事件。