Are imported modules bundled into module chunk files in Angular

Question

Theoretically speaking, imagine having X,Y,Z lazy loaded modules in your angular application.

At some point, you decide that all of those modules needs to use 3rd party module that is around 1MB of size. Naturally, you will add imports: [ ... OurHeavyModule] into all 3 modules.

The question is - will that make chunk files of X,Y,Z larger by whole 1MB each? Or maybe packager is smart enough to actually make additional chunk that will be imported along - but only once.

Answer 1

I did a quick test and here is the result.

+-------------------------+----------------+
|       Source File       |  Bundle File   |
+-------------------------+----------------+
| App component (Eager)   | main.{hash}.js |
| Customers Module (Lazy) | 5.{hash}.js    |
| Products Module (Lazy)  | 6.{hash}.js    |
| Shared Module           | 1.{hash}.js    |
+-------------------------+----------------+

The shared module has a service that contains xlsx package ( 1.3MB ), and importing it into both customers and products generated only one single additional chunk 1.{hash}.js .

Also in the browser 1.{hash}.js chunk is loaded only once, whatever module (customers or products) first load is triggering this chunk only once.