Angular-cli: Importing BrowserAnimationsModule increases size by 80kB

[scttcper]

Versions

Angular CLI: 6.0.3
Node: 10.0.0
OS: darwin x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

Steps

1. Create new project ng new pj
2. Add BrowserAnimationsModule in app.module and add it to imports

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

size before with ng build --prod

chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.b4daf421c94934f530d4.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.f4b01ffa884caa16bbde.js (main) 155 kB [initial] [rendered]

size after

chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.b4daf421c94934f530d4.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.3a8d9503b82e0a5c7782.js (main) 235 kB [initial] [rendered]

main.js increased from 155 kB to 235 kB

[filipesilva]

/cc @IgorMinar

[filipesilva]

We tried to reproduce it and didn't see this result. Do you still see this? If so, can you upload a repro to github that we can look at?

[scttcper]

Still getting it
@filipesilva repro: https://github.com/scttcper/demo-BrowserAnimationsModule

https://github.com/scttcper/demo-BrowserAnimationsModule/blob/master/src/app/app.module.ts#L13

Commenting out the import line reduces the build size by the 80kb

[filipesilva]

Just checked it myself and can confirm. Below are the results of running source-map-explorer over prod builds, where adding BrowserAnimationsModule increases the bundle size by 80kb.

Without BrowserAnimationsModule:

With BrowserAnimationsModule:

[filipesilva]

@IgorMinar is this intended?

[josephliccini]

Did you try on ES2015?

I found that it's much more effective at removing dead code on ES2015.

[filipesilva]

I checked with the Angular Core team and they are aware of this, and looking at ways to lazy load animations.

[hansl]

Closing this as there doesn't seem to be much we can do. It's an unfortunate effect of not being fully tree shakeable, and that's in the hands of the Animation team. Having a lazy loading solution from the core team would fix this.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}