How to decrease prod bundle size?

by

Update February 2020

Since this answer got a lot of traction, I thought it would be best to update it with newer Angular optimizations:

  1. As another answerer said, ng build --prod --build-optimizer is a good option for people using less than Angular v5. For newer versions, this is done by default with ng build --prod
  2. Another option is to use module chunking/lazy loading to better split your application into smaller chunks
  3. Ivy rendering engine comes by default in Angular 9, it offers better bundle sizes
  4. Make sure your 3rd party deps are tree shakeable. If you’re not using Rxjs v6 yet, you should be.
  5. If all else fails, use a tool like webpack-bundle-analyzer to see what is causing bloat in your modules
  6. Check if you files are gzipped

Some claims that using AOT compilation can reduce the vendor bundle size to 250kb. However, in BlackHoleGalaxy’s example, he uses AOT compilation and is still left with a vendor bundle size of 2.75MB with ng build --prod --aot, 10x larger than the supposed 250kb. This is not out of the norm for angular2 applications, even if you are using v4.0. 2.75MB is still too large for anyone who really cares about performance, especially on a mobile device.

There are a few things you can do to help the performance of your application:

1) AOT & Tree Shaking (angular-cli does this out of the box). With Angular 9 AOT is by default on prod and dev environment.

2) Using Angular Universal A.K.A. server-side rendering (not in cli)

3) Web Workers (again, not in cli, but a very requested feature)
see: https://github.com/angular/angular-cli/issues/2305

4) Service Workers
see: https://github.com/angular/angular-cli/issues/4006

You may not need all of these in a single application, but these are some of the options that are currently present for optimizing Angular performance. I believe/hope Google is aware of the out of the box shortcomings in terms of performance and plans to improve this in the future.

Here is a reference that talks more in depth about some of the concepts i mentioned above:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

More Related Contents:

  1. How to bundle an Angular app for production
  2. How to add font-awesome to Angular 2 + CLI project
  3. angular-cli where is webpack.config.js file – new angular6 does not support ng eject
  4. How to undo Angular 2 Cli ng-eject?
  5. Avoiding relative paths in Angular CLI
  6. Using Angular CLI and unable to use relative image paths in CSS files
  7. angular-cli server – how to proxy API requests to another server?
  8. Could not find module “@angular-devkit/build-angular”
  9. How to add bootstrap to an angular-cli project
  10. How do I support Internet Explorer in an Angular 8 application?
  11. No ‘Access-Control-Allow-Origin’ header in Angular 2 app
  12. how to format date in Component of angular 5
  13. Load new modules dynamically in run-time with Angular CLI & Angular 5
  14. What’s the difference between –base-href and –deploy-url parameters of angular-cli tool
  15. ng: command not found while creating new project using angular-cli
  16. Get angular-cli to ng serve over HTTPS
  17. How to install a specific version of Angular with Angular CLI?
  18. Angular 6 – Could not find module “@angular-devkit/build-angular”
  19. @types/googlemaps/index.d.ts’ is not a module
  20. Update to Angular v6 – Module not found: Error: Can’t resolve ‘fs’
  21. When to use ‘npm start’ and when to use ‘ng serve’?
  22. Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6
  23. Angular 2 : No NgModule metadata found
  24. How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI
  25. How to rename a component in Angular CLI?
  26. Syntax Error in Angular App: Unexpected token
  27. Angular4 APP_INITIALIZER won’t delay initialization
  28. Angular5: Deploying Angular application to multiple clients
  29. How to generate components in a specific folder with Angular CLI?
  30. angular cli exclude files/directory for `ng test –code-coverage`

Leave a Comment