Increased initial main.js bundle size in v9 - mainly due to @angular/material packages

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

yes,

Description

Our initial bundle increased after the upgrade to angular v9. Below 2 screenshots made with webpack-bundle-analyzer, both are build with the --prod tag on. The complete size of our app decreased in size, but the main bundle increased slightly.

reporting this @filipesilva who mentioned the following

If you see your bundles increasing in size with Ivy, we want to know. Please open a new issue with a reproduction if possible. If you can’t publicly share your reproduction, consider sharing it privately instead.

In our case the initial bundle from the @angular module in angular 9.0.0 is increased by 170 kb (parsed) compared to the build size in angular 8.3.20

ANGULAR 9.0.0 bundle overview

ANGULAR 8.3.20 bundle overview

🔬 Minimal Reproduction

its a private repo, but can share an bitbucket account via a private message if needed

🔥 Exception or Error

budle size difference

Angular 9:

chunk {33} polyfills-es2015.5bbe6128ce574187632a.js (polyfills) 97.3 kB [initial] [rendered]
chunk {34} polyfills-es5.7489d086305aa2ccf313.js (polyfills-es5) 188 kB [initial] [rendered]
--
chunk {18} runtime-es2015.7b3c2daa7eda967f9d4b.js (runtime) 4.55 kB [entry] [rendered]
chunk {18} runtime-es5.7b3c2daa7eda967f9d4b.js (runtime) 4.54 kB [entry] [rendered]
--
chunk {32} main-es2015.7771c8f8f77604a6a0fb.js (main) 1.13 MB [initial] [rendered]
chunk {32} main-es5.7771c8f8f77604a6a0fb.js (main) 1.32 MB [initial] [rendered]
--
chunk {35} styles.96f30aa09bf98d520a7b.css (styles) 403 kB [initial] [rendered]

Angular 8:

chunk {20} runtime-es2015.8dcc6cc63434c93fc456.js (runtime) 4.68 kB [entry] [rendered]
chunk {20} runtime-es5.8dcc6cc63434c93fc456.js (runtime) 4.67 kB [entry] [rendered]
--
chunk {40} polyfills-es2015.c6262141f4f874e78e85.js (polyfills) 98.1 kB [initial] [rendered]
chunk {41} polyfills-es5.468b140bd31c7a429390.js (polyfills-es5) 185 kB [initial] [rendered]
--
chunk {39} main-es2015.d68e6e1b9429135d5faf.js (main) 1.02 MB [initial] [rendered]
chunk {39} main-es5.d68e6e1b9429135d5faf.js (main) 1.19 MB [initial] [rendered]
--
chunk {42} styles.38056460a1b2b723be01.css (styles) 397 kB [initial] [rendered]

🌍 Your Environment

ngular CLI: 9.0.0
Node: 13.3.0
OS: darwin x64

Angular: 9.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0
@angular-devkit/build-angular     0.900.0
@angular-devkit/build-optimizer   0.900.0
@angular-devkit/build-webpack     0.900.0
@angular-devkit/core              9.0.0
@angular-devkit/schematics        9.0.0
@angular/flex-layout              9.0.0-beta.28
@ngtools/webpack                  9.0.0
@schematics/angular               9.0.0
@schematics/update                0.900.0
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.5

Anything else relevant?

Similar issues: https://github.com/angular/angular-cli/issues/16989

[filipesilva]

@jtan80813 we’re still looking into how we can address the particular problem in this issue, but things are moving along.

[filipesilva]

Was taking a look today again, and one of the things I tried was to make builds without lazy routes. This way we can see bundle sizes without the de-optimizations that can result with lazy routes.

With Ivy the main bundle was 831296 B. With VE it was 814688 B. So even without lazy routes Ivy makes your bundle larger, which I find surprising.

I made my builds with source maps so I could use source-map-explorer to figure out where the extra size came from. Notably, in Ivy the source maps say 715 KB come from node_modules but in VE it’s only 606 KB. Within node_modules, Ivy has 526 KB from @angular/* directories while VE has only 428 KB. And of the angular packages, the Ivy bundle has 126 KB from @angular/material while the VE one only has 55 KB. So looking at @angular/material seemed promising.

The Ivy sourcemaps for material looked like this:

And the VE ones:

This looks quite odd to me. The Ivy app seems to have a lot more code from Ivy. list.js is especially striking, since it’s 29kb in Ivy but only 1kb in VE. I double checked and your app is using the correct deep imports (e.g. @angular/material/list). But I also find it weird that I can’t see any .ngfactory.js file in these source maps, and I used to see these before.

I ran ng build edu-app --prod --verbose &> log.txt to see the verbose log for both Ive and VE. The VE log mentions the .ngfactory.js files there for material so at least that confirms they were used.

At this point I feel I’m kinda out of leads so I might as well just go though the verbose log to see if something catches my eyes. I’ve seen a bunch of these in the past so that’s a reasonable enough thing to do.

I did find something odd early on:

 [1hPV] D:/sandbox/banax_angular/node_modules/rxjs/internal/Subscriber.js 9.17 KiB {1} [built]
     ModuleConcatenation bailout: Module is not an ECMAScript module
     cjs require ../Subscriber [JJ8B] D:/sandbox/banax_angular/node_modules/rxjs/internal/util/canReportError.js 3:33-57
     cjs require ../Subscriber [Yfti] D:/sandbox/banax_angular/node_modules/rxjs/internal/util/toSubscriber.js 3:33-57
     cjs require ./Subscriber [d4zx] D:/sandbox/banax_angular/node_modules/rxjs/internal/InnerSubscriber.js 18:33-56
     cjs require ./Subscriber [dmvN] D:/sandbox/banax_angular/node_modules/rxjs/internal/OuterSubscriber.js 18:33-56
     cjs require ../Subscriber [sGav] D:/sandbox/banax_angular/node_modules/rxjs/internal/operators/observeOn.js 18:33-57
     cjs require ./Subscriber [tkgy] D:/sandbox/banax_angular/node_modules/rxjs/internal/Subject.js 19:33-56

This is the entry for the D:/sandbox/banax_angular/node_modules/rxjs/internal/Subscriber.js module. It says why this module is in the compilation, and why it’s not concatenated with other modules. Module concatenation is a big part of size savings so it’s important to have as little of these ModuleConcatenation bailout as possible.

I saw this ModuleConcatenation bailout: Module is not an ECMAScript module for a bunch of rxjs modules. But since I know that RxJS does ship a ESM version, I find it odd. I searched the project source code for rxjs/ and found a bunch of import { Subject } from 'rxjs/internal/Subject'; and the like.

Projects really shouldn’t be importing from rxjs/internal so this looks wrong. I also saw a tslint rule blacklisting rxjs and found that odd, since that is the correct way of importing things like Subject. Maybe at some point we made projects with that lint rule and since then removed it?

I replaced all rx/internal/operators/* imports to rx/operators, and all remaining rx/internal/* ones to just rxjs. I rebuilt and saw the Ivy main down to 799681 B (from 831296) and the VE one down to 783077 B (from 814688). Keep in mind these are still numbers for the app without any lazy routes. So about 31kB down in both. This wasn’t the cause of the Ivy vs VE problem but it was something that was going wrong regardless.