Angular Bundle Size Optimization

Application optimization is important in enabling fast load time in your application. This could be achieved with the following steps

1. gzipper gzipper is an NPM package which provides a CLI for compressing files using the popular compress algorithms like Brotli and Gzip. Also this module works great with many CLI UI tools (Angular CLI, Vue CLI, create-react-app) and supports few option flags for each algorithm. I. Install zipper as a Dev Dependency to your project.

npm i -D gzipper

2.Build your project with --prod, --aot, and --build-optimizer flags. If you are not familiarized with --build-optimizer, it enables ‘@angular-devkit/build-optimizer’ optimizations when using the ‘aot’ option.

ng build --prod --aot --build-optimizer

3.Lazyloading

Separating modules into different chucks and using the right preloading strategies to load a module.

4.Angular Universal
A technology that renders Angular applications on the server.
A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Thanks for reading