问题
We have an Angular 7 project that generates a Custom Element with Angular Elements. This Custom Element is used in a React project and in an AngularJS project. When the code of the Custom Element is loaded in one of these projects, the site is slowed down by around 30% - even if the Custom Element is not rendered into the DOM!
Performance analysis shows that the methods invokeTask() and runTask() from zone.js are called very often.
I tried to blacklist the events as it is described in https://github.com/angular/zone.js/blob/master/STANDARD-APIS.md but this had no effect.
The dependencies in packages.json are:
"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"
},
So my question is: why is zone.js listening to events even if the Custom Element is not rendered in the DOM? How is it possible to make the site faster again?
Update: I also tried setting ChangeDetection to onPush, but the issue remains.
回答1:
I would keep out of touching ZoneJS settings, since it would heavily affects Angular itself.
I had a similar experience with a component that every time was created slowed down because there was a circular dependency. My guess is that there is something in your code, more probably with dependencies, that leads to multiple events generated.
来源:https://stackoverflow.com/questions/55498397/angular-elements-zone-js-event-listeners-slow-down-homepage