2

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
  • 1,160
  • 1
  • 14
  • 25

2 Answers2

3

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

livthomas
  • 1,160
  • 1
  • 14
  • 25
  • 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 – Vinkal Vishnoi Jan 05 '23 at 06:44
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.

Basavaraj Bhusani
  • 5,375
  • 2
  • 16
  • 24
  • 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? – livthomas Apr 24 '18 at 11:08