Change Detector
Change Detector is a command-line tool designed to help you identify the components slowing down your Angular application.
Install
Install globally (recommended):
npm install -g ng-changedetector
Or as a dev dependency:
npm install ng-changedetector --save-dev
How does it work?
Specify which Angular modules/components you want to run changedetector
on and it will inject a few lines of code into the component's HTML and Typescript files (don't worry, you can easily remove the changes any time). The injected code will enable the component to increment a counter and log to your brower console everytime the component is re-rendered.
This will allow you to identify components which are being rendered more often than expected and potentially causing performance issues within your application.
Next, apply performance optimizations to those troublesome components. Unfortunately, that part is up to you. But a good place to start is by implementing the OnPush change detection strategy on that component.
Once you're done, you can simply remove the code injected by changedetector
.
If you need more optimization techniques, @mgechev compiled an awesome checklist on Angular Performance which you can find here.
Usage
You can get a full description of Change Detector's usage by running:
changedetector --help
NOTE: Change Detector is designed to clean up the few lines of code it inserts in order to leave your code the way it found it but while not necessary -- it is recommended that the projects you use this on are version controlled for peace of mind.
Quick Start
changedetector -p /path/to/project -c <component> -m <module>
In this example, lets apply changedetector
on the home
component and dashboard
feature module of an Angular project called my-app
:
changedetector -p ~/projects/my-app -c home -m dashboard
This will inject a few lines of code into those components which will cause the component to log to console everytime they are re-rendered.
Clean up
To remove the inserted code, simply add --undo
.
Eg. Removing from the home
component and dashboard
feature module.
changedetector -p ~/projects/my-app -c home -m dashboard --undo
More Examples
1. Apply changedetector
on component
changedetector -p ~/projects/my-app -c home
2. Apply changedetector
on feature module
changedetector -p ~/projects/my-app -m dashboard
3. Apply changedetector
on component and feature module
changedetector -p ~/projects/my-app -c home -m dashboard
4. Apply changedetector
on mulitple components
changedetector -p ~/projects/my-app -c home -c contact