Large bundle size when importing even a single module

[cexbrayat]

Bug description:

Adding a single ng-bootstrap module (like NgbCollapseModule in my example) leads to a surprisingly large increase of the application bundle size.

It looks like there is something fishy, as importing just this module in our application drags ~80kb of ng-bootstrap, plus 42kb of @angular/forms. I can reproduce with a bare CLI application (with numbers slightly lower).

Link to minimally-working StackBlitz that reproduces the issue:

https://github.com/cexbrayat/collapse-bundle-size

This repo has been created using the latest CLI (11.0.2)

• 1rst commit: generate the application (branch chore/init)

ng new collapse-bundle-size --defaults

Building this bare application gives:

ng build --prod --source-map
Initial Chunk Files               | Names         |      Size
main.866a4eb66ed1bedd7877.js      | main          | 135.41 kB

The generated sourcemap looks like

• 2nd commit: add ng-bootstrap (branch feat/ngb-module)

Adding ng-bootstrap produces the following results:

ng add @ng-bootstrap/ng-bootstrap
ng build --prod --source-map
Initial Chunk Files               | Names         |      Size
main.cb92446fa68ee2d403ee.js      | main          | 288.59 kB

That's a large increase, but ng add adds the complete NgbModule to the imports, so that may be expected.

• 3rd commit: import just NgbCollapseModule (master)
  Replace the import of NgbModule by NgbCollapseModule leads to the following results:

Initial Chunk Files               | Names         |      Size
main.1617f8bf4ea0ac9824ea.js      | main          | 270.76 kB

Note that the size is slightly better but still very large for a module containing a single directive. It still drags in @angular/forms in the application bundle when you would expect it doesn't.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 11.0.1

ng-bootstrap: 8.0.0

Bootstrap: 4.5.3

[thecp]

I am experiencing the same issue only after updating Angular to v11. Same ng-bootstrap version (or other versions) looks fine with Angular v10 but after update to v11 bundle size grows like you described.

[maxokorokov]

I'm getting the same results when using the library built with #3906.

Importing NgbCollapseModule:

• ~4Kb with cli 10 and ng-bootstrap 8
• ~73Kb with cli 11 and both ng-bootstrap 8 and ng-bootstrap built with feat: upgrade to Angular 11 #3906

So needs further investigation for sure.

[santam85]

Interesting information around possible causes here: https://next.angular.io/guide/ivy-compatibility#payload-size-debugging

[devoto13]

I did some debugging and it looks like value accessor variables (like here) is one of the things, which retain code. Inlining the mentioned value accessor results in all typeahead code eliminated from the bundle. I'll try to setup a minimal reproduction and report on Angular CLI repo, but I guess another approach may be to inline them in ng-bootstrap sources 🤔

[devoto13]

Inlining value accessors brings size down ~50%, so there is more to it. I'll continue the investigation tomorrow.

UPD There was one more forwardRef().

[maxokorokov]

@cexbrayat @devoto13 thanks for getting to bottom of the issue, but looks like it was fixed in the CLI 11.0.4 → angular/angular-cli#19573.

So I'm going to close this one.

[maxokorokov]

BTW, I confirmed with ng-bootstrap 8.0.0 and cli 11.0.4. Getting same results as with the suggested fix in #3914