Does Angular lazy-loading reduce the bundle size?

Question

I am new to angular. I would like to know more about lazy loading. As per definition Lazy loading modules helps us decrease the startup time. So my question is, suppose my application is having 50 components. After build it with production it generates vendor.js with 900 KB. And if I lazy load 10 components among them which generates chunk file '1.chunk.js' with 100 kb.

So in this scenario does my vendor.js bundle size decrease from 900 KB to 800 KB? If not how Lazy loading modules helps us decrease the startup time?

Answer 1

No, Angular's lazy loading feature does not reduce the bundle size, it only loads a fraction of the bundle (on demand) -AKA chunk- instead of loading it entirely. So for your case, bundle size wont decrease from 900 KB (if you cumulate the sizes of the chunks, since after implementing lazy loading , there will be several chunks to load), but also wont load 900 KB at once.

Answer 2

Lazy Loading as the name suggests loads something only when it is requested for(i.e. lazily)

That being said, if you have lazy loading implemented in your App, the App will load with only the relevant modules that are required to load your app.

So essentially it is not loading the modules that aren't really required initially for the App to load.

So that is how it helps speed up the Application's load time.