How to lazy load libraries in Angular application

Question

We have an Angular project with many external libraries which has gradually grown in size to 10 MB so it takes some time to load the whole application.

We are now thinking of splitting the application into multiple lazy loaded modules. However, all the tutorials talk about splitting your application code into multiple JS chunks but not about splitting libraries contained in vendor.bundle.js into multiple chunks based on the modules where they are used. Just splitting our application code would not save us much trouble since external libraries make up most of the application size.

Most of the libraries our application depend on are only used in a single module so there is no point in having them inside vendor.bundle.js. How can we split this bundle so the smaller vendor chunks will follow the structure of lazy loaded modules? Is it possible to do this easily by Angular CLI or is it not that common and we need some dirty hacks?

livthomas · Accepted Answer · 2018-05-01 14:56:08Z

3

We have discovered that the libraries are automatically split between chunks if they are needed only in a single lazy-loaded module.

answered May 1, 2018 at 14:56

livthomas

1,2201 gold badge16 silver badges28 bronze badges

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

1 Comment

Vinkal Vishnoi Over a year ago

What if a library is required in more than one lazy loaded module? Will that get loaded initially or it will be included in chunk

Basavaraj Bhusani · Accepted Answer · 2018-04-24 07:42:17Z

1

There are many ways to add JavaScript libraries dynamically. There is one useful solution I found on stackoverflow.

https://stackoverflow.com/a/42766146/7458082

You can load the library OnInit of the main component of the lazy module. There is promise that you can hook to initialize the component after the library is loaded.

answered Apr 24, 2018 at 7:42

Basavaraj Bhusani

5,7032 gold badges19 silver badges24 bronze badges

1 Comment

livthomas Over a year ago

So I assume there is no standard Angular way of doing something like that and you always need to use some kind of workaround, am I right?

Collectives™ on Stack Overflow

How to lazy load libraries in Angular application

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related