Big bundle size increase since 1.6.4 due to unused module bundling

[blackholegalaxy]

Versions

Angular CLI: 1.6.4
Node: 8.9.4
OS: darwin x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.38
@angular-devkit/core: 0.0.25
@angular-devkit/schematics: 0.0.48
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.13
@schematics/schematics: 0.0.13
typescript: 2.5.3
webpack-bundle-analyzer: 2.9.2
webpack: 3.10.0

Repro steps

• Start a project using CLI, with primeng or any vendor lib with significant size
• Build using 1.6.3
• Upgrade to 1.6.4
• See the bundle size incease

Observed behavior

The bundle size almost double by upgrading from 1.6.3 to 1.6.4.

With CLI 1.6.3

Here is the bundle size using 1.6.3:

Your global Angular CLI version (1.6.4) is greater than your local
version (1.6.3). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
 10% building modules 4/9 modules 5 active 
 Node#moveTo was deprecated. Use Container#append.
Date: 2018-01-17T11:29:54.696Z
Hash: 9cad94a0e9a7a1c66030
Time: 64709ms
chunk {scripts} scripts.6d9a6f73c2fba1046e6d.bundle.js (scripts) 139 kB [initial] [rendered]
chunk {0} 0.60bf39ce035cb32b8b7f.chunk.js () 272 kB  [rendered]
chunk {1} polyfills.6b043aa398fcbe2f271c.bundle.js (polyfills) 98 kB [initial] [rendered]
chunk {2} main.f1a51fc838eab44e1eda.bundle.js (main) 737 kB [initial] [rendered]
chunk {3} styles.0397ffca7bf087ec2245.bundle.css (styles) 359 kB [initial] [rendered]
chunk {4} inline.e06e77bd85d28143ea54.bundle.js (inline) 1.47 kB [entry] [rendered]

You can see the primeNG modules at the bottom right, a very small box, in the brown area. Only two used modules are imported: MessagesModule and MessageModule.

PrimeNG modules used in our lazy loaded feature module are all correctly used and imported (purple area), no unused module is imported.

using 1.6.4

And after an upgrade to 1.6.4 (just changed the CLI version in package.json, nothing was changed in the app code):

10% building modules 4/9 modules 5 active 
moveTo was deprecated. Use Container#append.
Date: 2018-01-17T11:37:45.003Z
Hash: e62f137e632601d062d8
Time: 73709ms
chunk {scripts} scripts.4ae51f590f10a3124165.bundle.js (scripts) 139 kB [initial] [rendered]
chunk {0} 0.535a203d5ea859ab1f28.chunk.js () 104 kB  [rendered]
chunk {1} polyfills.6b043aa398fcbe2f271c.bundle.js (polyfills) 98 kB [initial] [rendered]
chunk {2} main.7a50d4a869a4ba1145db.bundle.js (main) 1.29 MB [initial] [rendered]
chunk {3} styles.ef8d559460b8a487e719.bundle.css (styles) 366 kB [initial] [rendered]
chunk {4} inline.edf4c4b8b830bba7be9e.bundle.js (inline) 1.47 kB [entry] [rendered]

As you can see for any mysterious reason, the primeNG modules were ALL imported in the MAIN bundle. They are not imported in our lazy loaded module anymore. And you can note, compared to previous screenshot, that unused (nor imported anywhere in our app code) modules were bundled (calendar.js, tree.js, datatable.js for example). It causes on our app a big increase in size.

It seems the tree shaking or module resolution is broken.

Please also note :

• a 10+ seconds increase of bundling time (reproduced many times).
• the different number of modules exposed via the main.ts + x modules information.
• the increased size of styles bundle.
• the lower size of 0 chunk (lazy loaded module)

Desired behavior

The tree shaking should behave in the same way as before, not increasing our bundle size by importing unused modules.

[clydin]

Can you provide the output of ng --version with the 1.6.3 case? Also can you run npm ls uglify-es for both cases?

[blackholegalaxy]

As requested here is the ng --version for 1.6.3 case.

Angular CLI: 1.6.3
Node: 8.9.4
OS: darwin x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
typescript: 2.5.3
webpack-bundle-analyzer: 2.9.2
webpack: 3.10.0

npm ls uglify-es: empty in both cases.

project@0.0.0 /Users/bhole/Dev/project
└── (empty)

I tried to delete node_modules, reinstall using either npm or yarn with the same results.

[clydin]

Can you try deleting node_modules and any package lock files (package-lock.json/yarn.lock) then npm install and then try ng --version and npm ls uglify-es again?

[kHorozhanov]

I have the same problem after upgrade from 1.6.3 to 1.6.5

[blackholegalaxy]

1.6.3

Using the 1.6.3 and 1.6.4 after deleting yarn.lock and npm-lock lead to #9283 so I can't ng anything. But the results about ls uglify-es are:

project@0.0.0 /Users/bhole/Dev/project
└─┬ @angular/cli@1.6.3
└─┬ uglifyjs-webpack-plugin@1.1.6
└── uglify-es@3.3.7

So I installed the angular 1.6.5 since it was released, to see if the bundle size improved.

1.6.5

versions

ng --version

Angular CLI: 1.6.5
Node: 8.9.4
OS: darwin x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.5.3
webpack-bundle-analyzer: 2.9.2
webpack: 3.10.0

npm ls uglify-es

uglify-es
project@0.0.0 /Users/bhole/Dev/project
└─┬ @angular/cli@1.6.5
  └─┬ uglifyjs-webpack-plugin@1.1.6
    └── uglify-es@3.3.7

That on a fresh install via npm install. Same result using yarn.

FYI Package size using 1.6.5

Node#moveTo was deprecated. Use Container#append.
Date: 2018-01-19T09:20:36.471Z                                                c Hash: ddbb8383d58f5acfceca
Time: 70244ms
chunk {scripts} scripts.4ae51f590f10a3124165.bundle.js (scripts) 138 kB [initial] [rendered]
chunk {0} 0.74eea131d6ddb440a701.chunk.js (common) 4.15 kB  [rendered]
chunk {1} 1.04b2ba3b75fbc0771030.chunk.js () 99.3 kB  [rendered]
chunk {2} 2.d249edd5e9072c59af5d.chunk.js () 10.7 kB  [rendered]
chunk {3} polyfills.daacf61aa34f6b1a0d50.bundle.js (polyfills) 97.7 kB [initial] [rendered]
chunk {4} main.7c906f67da0e10298156.bundle.js (main) 1.3 MB [initial] [rendered]
chunk {5} styles.75462ad1930d363ba58d.bundle.css (styles) 366 kB [initial] [rendered]
chunk {6} inline.fd8d651f85521e6f03e4.bundle.js (inline) 1.52 kB [entry] [rendered]