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?

yes, it reduces the initial bundle size, this allows for the page to display faster on the screen. — piotr szybicki
– piotr szybicki, Commented Nov 29, 2018 at 9:53

SeleM · Accepted Answer · 2018-11-29 12:09:26Z

10

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.

edited Nov 29, 2018 at 12:09

answered Nov 29, 2018 at 9:54

SeleM

9,6885 gold badges36 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SiddAjmera · Accepted Answer · 2018-11-29 09:55:07Z

1

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.

answered Nov 29, 2018 at 9:55

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Comments

H-a-Neo · Accepted Answer · 2018-11-29 10:07:17Z

Lazy loading basically does is it break your components to modules. so in the routing you just have to configure master routes and load modules as child routes.

this breaks your 100 components in to 10 modules each one has 10 components so for each one you will have separate

module-ngfactory.js

files . so if you would include these 100 files in one modules (not lazy loading) you will have one module-ngfactory.js file witch is bigger than that.

and this loading is on demand and only when requested. so loading is fast with this defiantly.

Best way to speed up the Angular loading is to introduce AOT builds. when you use

ng-s

this will transpile the code and let you know the status of transpilation. but all the data including ts files will be sent to browser for debug purpose. so ts to js transpilation happens in browser. this is very slow .

by using

ng-s --aot

AOT - Ahead of time transpilation will genarate the js files and send to the browser. so there are no browser side transpilation. this is very very fast than using JIT

bulletproof monk · Accepted Answer · 2020-06-22 08:59:22Z

0

Because the initial chunk size that is loaded is very small, it will loaded quickly compared to big bundle size with all modules loaded eagerly.

answered Jun 22, 2020 at 8:59

bulletproof monk

11 silver badge

Collectives™ on Stack Overflow

Does Angular lazy-loading reduce the bundle size?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related