-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Large bundle size when importing even a single module #3904
Comments
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. |
I'm getting the same results when using the library built with #3906. Importing
So needs further investigation for sure. |
Interesting information around possible causes here: https://next.angular.io/guide/ivy-compatibility#payload-size-debugging |
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 |
To fix dead code elimination using Angular 11. See angular/angular-cli#19572 (comment) for more details. The *inline* option was chosen as ng-bootstrap does not needs to export these accessors and they're only used by a single component. This option appears the simplest to me, it is less likely to regress in the future and should work independently of whether consumer users Angular CLI or custom tooling to build their application. At the cost of slightly worse code readability. Fixes ng-bootstrap#3904
Inlining value accessors brings size down ~50%, so there is more to it. I'll continue the investigation tomorrow. UPD There was one more |
To fix dead code elimination in Angular 11. See angular/angular-cli#19572 (comment) for more details. The *inline* option was chosen as ng-bootstrap does not needs to export these providers and they're only used by a single component. This option appears the simplest to me, it is less likely to regress in the future and should work independently of whether consumer users Angular CLI or custom tooling to build their application. At the cost of slightly worse code readability. Fixes ng-bootstrap#3904
@cexbrayat @devoto13 thanks for getting to bottom of the issue, but looks like it was fixed in the CLI So I'm going to close this one. |
BTW, I confirmed with |
To fix dead code elimination in Angular 11. See angular/angular-cli#19572 (comment) for more details. The *inline* option was chosen as ng-bootstrap does not needs to export these providers and they're only used by a single component. This option appears the simplest to me, it is less likely to regress in the future and should work independently of whether consumer users Angular CLI or custom tooling to build their application. At the cost of slightly worse code readability. Fixes #3904
To fix dead code elimination in Angular 11. See angular/angular-cli#19572 (comment) for more details. The *inline* option was chosen as ng-bootstrap does not needs to export these providers and they're only used by a single component. This option appears the simplest to me, it is less likely to regress in the future and should work independently of whether consumer users Angular CLI or custom tooling to build their application. At the cost of slightly worse code readability. Fixes ng-bootstrap#3904
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
)chore/init
)Building this bare application gives:
The generated sourcemap looks like
![Capture d’écran 2020-11-19 à 14 09 31](https://user-images.githubusercontent.com/411874/99670482-e6187b80-2a70-11eb-8437-ca63507145b3.png)
feat/ngb-module
)Adding ng-bootstrap produces the following results:
That's a large increase, but
![Capture d’écran 2020-11-19 à 14 14 37](https://user-images.githubusercontent.com/411874/99671004-b5851180-2a71-11eb-9bda-8350433d6826.png)
ng add
adds the completeNgbModule
to the imports, so that may be expected.NgbCollapseModule
(master
)Replace the import of
NgbModule
byNgbCollapseModule
leads to the following results: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
The text was updated successfully, but these errors were encountered: