Description: On using Lighthouse tool to audit our application, it showed in the report that minifying javascript files can reduce payload and script parse time.
- Set
optimization
flag in ourangular.json
file to true. This flag enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining.
- The Lighthouse audit report showed that the score increased by 15 points.
- The compiled code size reduced significantly from 32.5mb to 20.8mb. Using webpack bundle analyzer we saw that the javascript files generated sizes decreased.
Description: Lighthouse report suggested that we can remove unused CSS, as it slows down the browser's construction of the render tree.
- we checked the coverage tab in Chrome Dev Tools, and we noticed that
angular material
css was never used in our app, and we didn't need this package at all so we removed it. - the
styles.js
file it's size significantly decreased from 108kb (~4500 lines) to 31kb (~1500 lines).