This is the optimization package. As any optimization, it should be take with care,with measuring results before and after applying.
If you have Single Page application, you, probably, don't' want to block loading your application with synchronous scripts. To help with this defer and async tags appeared. But what if you use cli for generating output? Right now, no @angular/cli, no react, doesn't support adding asynchronous attributes out of the box. This tiny CLI parse your index.html file and adds defer attribute to your scripts tag
Just check lighthouse reports. Left side - before, right - after. All comparisons were done on default applications produced by the corresponding cli without any additional optimization/changes.
Check these two image from the lighthouse. Nothing was done except deferify. Looks better, yeah?
All comparisons were done 21.04.2019 and may vary depending on your conditions.
What about VUE
Right now, adding defer attribute to the hello-world VUE application demonstrate a slightly negative impact or no impact. This shows that all performance tunings should be carefully measured before going to the prod.
How to use
npm i --save-dev deferify
Add it to your build process:
"build:prod" : "ng build --prod && deferify"
Deferify will scan your dist folder and all it's subfolders for all index.html files and tries to update them. Also you can pass path to another folder:
or just to the single file
Deferify will not touch scripts without src, with already added defer or async attributes.
What about adding async attribute
The tool should do only one thing and do it well