Using single component from library causes lazy-loaded modules to end up in main bundle

Question

I've created a Bootstrap component library for angular along with a demo application. However when building the application, the main bundle size is massive. More remarkably, adding components to the library, and adding pages (lazy-loaded) to the application which load these modules, recently increased my main bundle size from 650kB to 840kB.

I already checked other questions like this one too, but it doesn't give me an answer.

EDIT 5

I recreated the project in an angular workspace, with dist/lib-name refs in the tsconfig.json. Even here I can come to a very simple conclusion:

• With no references to a library component in the AppModule, the main bundle is simple and clean, as expected (328 kB):

• From the moment I use a single component in the application, tons of javascript chunks from the library are bundled in the main bundle (928 kB). Even the most simple BsAlertComponent:

EDIT 4

I recreated my project in an angular workspace, with the expected result:

Total main bundle size (js): 509 kB. The main bundle only contains the navbar chunk

Then for the NX workspace with a single library:

Total main bundle size (js): 695 kB. Note all the unnecessary chunks. I'm pretty sure there are no index-imports (import {} from '../navbar' instead of import {} from '../navbar/navbar.module') in my project.

EDIT 3

I seem to have found a catch here. While recreating my workspace step-by-step, here's what I see:

When there's no animations on my component

This is my main bundle

This is the common bundle (lazy-loaded) * Contains BsListGroup and BsCard

And the lib/components chunk from the main.xxx.js bundle looks like this: Contains only the navbar

Now let's put an animation on the BsAlertComponent:

This is my main bundle

My common bundle (containing BsListGroup and BsCard) looks exactly the same as *

However, the components chunk from the main bundle looks like this And clearly contains the entire BsAlertComponent (which I don't need) and tons of garbage from other components in the project...

PS. Please fix the SO file-uploader...

EDIT 2

I created a minimal angular workspace (even without a library) and I can see all the same behavior as I described in my old question (see below).

The app contains 3 components each with their respective module, 2*2 pages. The BsNavbarModule is loaded on the AppModule because I'm using the BsNavbarComponent in the root.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BsNavbarModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Each page loads the respective component.

Carousel 1 page:

@NgModule({
  declarations: [
    CarouselOneComponent
  ],
  imports: [
    CommonModule,
    BsCarouselModule,
    CarouselOneRoutingModule
  ]
})
export class CarouselOneModule { }

Offcanvas 1 page:

@NgModule({
  declarations: [
    OffcanvasOneComponent
  ],
  imports: [
    CommonModule,
    BsOffcanvasModule,
    OffcanvasOneRoutingModule
  ]
})
export class OffcanvasOneModule { }

So what would you expect to see here?

• main bundle
  • AppModule -> AppComponent
  • NavbarModule -> BsNavbarComponent
• carousel-one bundle
  • CarouselOneModule
• carousel-two bundle
  • CarouselTwoModule
• bs-carousel bundle -> BsCarouselModule
• offcanvas-one bundle
  • OffcanvasOneModule
• offcanvas-two bundle
  • OffcanvasTwoModule
• bs-offcanvas bundle -> BsOffcanvasModule

What do we get?

• main bundle -> NavbarModule

• bundle with the Carousel1Page
• bundle with the Carousel2Page
• bundle with the Offcanvas1Page
• bundle with the Offcanvas2Page
• One big common bundle with both the BsCarouselModule and BsOffcanvasModule (this is not what I expect it to be)

• main, polyfills, runtime, styles

Why are all these components bundled together into a single bundle? When the user visits a page, it's not necessary to download the js for all these components... In this example it's only about 2 components, but in my real application there's like 30 components, of which most are bundled together for no reason.

OLD QUESTION

So to rephrase, the pages are lazy-loaded obviously:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  ...
  { path: 'range', loadChildren: () => import('./range/range.module').then(m => m.RangeModule) },
  { path: 'select', loadChildren: () => import('./select/select.module').then(m => m.SelectModule) }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class BasicRoutingModule { }

And only in these pages I'm loading the modules from my library. I ran the webpack bundle analyzer on the main bundle, and noticed that all modules from my library are bundled in my main bundle, just because I'm loading the BsNavbarModule in the AppModule.

npm run build:wba
npm run analyze:wba

The Stuff in red is all part of the main bundle, even though I never import the component's module in the AppModule, only in lazy-loaded modules. The BsNavbarComponent is used on the AppComponent, so the BsNavbarModule on the other hand needs to be in the main bundle. I'm also under the impression that because of all this, the @angular/core and @angular/common bundles are a lot bigger than they actually need to be.

Another catch is that I'm using ngx-highlighjs in some lazy-loaded page, and this library requires you to specify the HIGHLIGHT_OPTIONS at root level. Because of this, you can also see the entire ngx-highlightjs library packaged in the main bundle, even though I only load the module on yet another lazy-loaded page...

The module of my library is specified as "esnext".

I tried adding "sideEffects": false to the package.json, with the following result:

Which still doesn't solve my problem...

How can I solve this? Why are angular modules that aren't loaded in the AppModule bundled in the main bundle?

EDIT

I created a blank angular app:

Installed my library and added the global styles:

And created a page (ng g module demo --module app --route demo) and added the BsNavbarComponent on it:

This immediately increased my main bundle size with 50kB...

Answer 1

Problem solved

Documentation

The folder for sub-entrypoints MUST be next to the src folder.

Answer 2

Basing this answer off of Edit 2, and not the Old Question.

Why are all these components bundled together into a single bundle? (common.js chunk)

• One big common bundle with both the BsCarouselModule and BsOffcanvasModule (this is not what I expect it to be)

This behavior is a default optimization technique that you can turn off by specifying commonChunk: false in angular.json. However, this is usually a good idea to leave on, because shared code is de-duplicated by putting code used across multiple bundles into one place (common.js chunk).

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      ...
      "commonChunk": false,
    ...

I've used your minimal angular workspace to compare ng build --source-map ouput below:

commonChunk: true (default)

ng build output (common.js chunk, faster subsequent lazy loads, smaller lazy chunks)

commonChunk: false

ng build output (no common.js chunk, slower lazy loads, larger lazy chunks,)

So when does does the common chunk get loaded in the UI?

It depends on your imports. It seems to me that if you import even a single module in your main bundle that ends up in the common chunk (because you also imported that module in lazy modules), the common chunk will be loaded during the initial render which could impact performance.

Basically to prevent loading the common chunk in your initial render, you want to avoid importing the same modules in both main and lazy chunks if at all possible.

This is not an issue with the minimal workspace you provided, but I highly suspect this is the case with your old question.

Network tab (minimal workspace, commonChunk: true) showing that common chunk is not loaded on initial render:

commonChunk: false also comes with a small tradeoff in the amount of js that is ultimately sent to the client. You are no longer de-duplicating code. Since your lazy chunks are larger, it takes longer to actually load them; but this can be mitigated by implementing a Preloading Strategy (which you should do with lazy loading anyways, but that's a bit outside the scope of this question).