DEV Community

es404020
es404020

Posted on

 

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

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git