loading...
Angular

[Pro Tip] How to analyze your Angular bundle

bartosz_io profile image Bartosz Pietrucha ・1 min read

It's time for another Angular Knowledge Pill! 💊 It takes just 10 seconds to learn something new 🔥 Like taking your morning vitamins 😃

Imagine you are building an application with three modules:

  • main module,
  • records module (lazy loaded feature module),
  • settings module (lazy loaded feature module).

Now, you would like to know how much do those modules contribute to the whole application size! Using a webpack-bundle-analyzer it is more than easy! Take a look at how to analyze your application bundles below.

Alt Text

This will give you a very detailed overview of your application. You can see how much do the final JavaScript bundles weight and how their sizes refer to each other! The colored diagram below is constructed this way that the bigger the given rectangle the heavier the particular bundle!

Alt Text

Alt Text

If you would like to receive this kind of knowledge pills directly into your mailbox, subscribe at angular-academy.com/blog/. I will be sending them regularly! Remember, it just takes 10 seconds to learn something new! 😃

Also, I would appreciate if you tweet this knowledge pill!
Help others to discover the knowledge!

Posted on by:

bartosz_io profile

Bartosz Pietrucha

@bartosz_io

Fullstack engineer, https://angular-academy.com founder, speaker, trainer, software consultant. I can help you with Angular and reactive architecture.

Angular

This is where we write about all things Angular. It's meant to be a place for Angular community and people interested in Angular and the Angular ecosystem.

Discussion

pic
Editor guide