Bundle size got bigger between

Versions

Version 6

Angular CLI: 6.0.0-rc.4
Node: 9.11.1
OS: darwin x64
Angular: 6.0.0-rc.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.6
@angular-devkit/build-angular     0.5.6
@angular-devkit/build-optimizer   0.5.6
@angular-devkit/core              0.5.6
@angular-devkit/schematics        0.5.6
@angular/language-service         6.0.0-rc.5
@ngtools/json-schema              1.1.0
@ngtools/webpack                  6.0.0-rc.4
@schematics/angular               0.5.6
@schematics/update                0.5.6
rxjs                              6.0.0-uncanny-rc.7
typescript                        2.7.2
webpack                           4.5.0

Version 5

Angular CLI: 1.7.3
Node: 9.11.1
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

Observed behavior

Bundle size got bigger in preparing RC.4 version. Size change:

old     | new     | difference
2876062 | 3106917 | 230855

Version 6

total 12096
 28621 Apr 16 20:50 category-listing-category-listing-module-ngfactory.9f51fb939155a33b13cb.js
174940 Apr 16 20:50 checkout-checkout-module-ngfactory.719487c0e093c2301778.js
 81360 Apr 16 20:50 dashboard-dashboard-module-ngfactory.aee7e70bbc5c70c6d329.js
139516 Apr 16 20:50 enquiry-enquiry-module-ngfactory.0bed2b1d7655c7576367.js
 46607 Apr 16 20:50 enquiry-enquiry-module-ngfactory~pdp-pdp-module-ngfactory.a4e9b2991ef60cc239c8.js
 23721 Apr 16 20:50 enquiry-enquiry-module-ngfactory~pre-qualifier-pre-qualifier-module-ngfactory.36f6576df601b1444585.js
 73867 Apr 16 20:50 homepage-homepage-module-ngfactory.09897d5d2aa0be8a4d88.js
162287 Apr 16 20:50 index.html
 38243 Apr 16 20:50 login-login-module-ngfactory.29d084a7a34e33c2d7fa.js
973239 Apr 16 20:50 main.e5d2e6b1e724be11d25c.js
383675 Apr 16 20:50 offer-offer-module-ngfactory.58f11da58b2f64f3ad19.js
124410 Apr 16 20:50 pdp-pdp-module-ngfactory.553688b01598f066f9a0.js
102726 Apr 16 20:50 polyfills.851e620b5c38f4ebc3f0.js
141947 Apr 16 20:50 pre-qualifier-pre-qualifier-module-ngfactory.91b73a077e1186581f3d.js
  2849 Apr 16 20:50 runtime.52f33320dc5dbb1f11d8.js
195904 Apr 16 20:50 scripts.81b9b31fc22018876e72.js
 50669 Apr 16 20:50 sdp-sdp-module-ngfactory.09f115a48978d8091845.js
 40648 Apr 16 20:50 sdp-sdp-module-ngfactory~search-search-module-ngfactory.70ffad08d75973a56ddf.js
168599 Apr 16 20:50 search-search-module-ngfactory.937f05ca36d37a290966.js
153089 Apr 16 20:50 styles.7e460f4f32a200e0def5.css

Version 5

total 10928
 22385 Apr 16 20:24 category-listing.module.2c3df031cc94c93ac9c8.chunk.js
154147 Apr 16 20:24 checkout.module.bb6a3788ff049b3f7be5.chunk.js
157872 Apr 16 20:24 common.2bf7f5f8f965a1ac4c6e.chunk.js
 54018 Apr 16 20:24 dashboard.module.885e73ff1e83c0429375.chunk.js
137933 Apr 16 20:24 enquiry.module.f729ece3b82676613a1c.chunk.js
 74156 Apr 16 20:24 homepage.module.48dd39244041b11eebc9.chunk.js
  6633 Apr 16 20:24 index.html
  1936 Apr 16 20:24 inline.b40bc3c941130f091a26.bundle.js
 38052 Apr 16 20:24 login.module.31e979f2bf809749044d.chunk.js
963763 Apr 16 20:24 main.936ac3a2672ab650e73f.bundle.js
329351 Apr 16 20:24 offer.module.0785ee0381bb565a59cf.chunk.js
111208 Apr 16 20:24 pdp.module.86a37123e155f6d144a6.chunk.js
146773 Apr 16 20:24 polyfills.b76d66902dcd525d7b19.bundle.js
128258 Apr 16 20:24 pre-qualifier.module.d2409d3e678b98220cd6.chunk.js
195546 Apr 16 20:24 scripts.0d19e69ae9ffee86f9f4.bundle.js
 43407 Apr 16 20:24 sdp.module.cb2c2e61ea63932053ea.chunk.js
148338 Apr 16 20:24 search.module.be56e44da2cdebb35739.chunk.js
162286 Apr 16 20:24 styles.df1510baa98c4e21144b.bundle.css

used commands: 6:

"configurations": {
    "production": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": true,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true
    }
}

5:

ng build -prod --aot=true --output-hashing=all --deploy-url=/static/frontend-som/ --build-optimizer --named-chunks=true

Desired behavior

Smaller or at least the same bundle size

[clydin]

The common module split logic has changed in v6. More granular common chunks are now created which lowers the amount of data necessary for a particular lazy route. This differs from the previous behavior wherein all common modules were downloaded for any route which uses one of the common modules regardless of the relevance of the other modules.

As an example, in version 1.x, to access the lazy route “enquiry” the following chunks (excluding the initial chunks) needed to be downloaded and initialized (if not previous done so):

137933 Apr 16 20:24 enquiry.module.f729ece3b82676613a1c.chunk.js
157872 Apr 16 20:24 common.2bf7f5f8f965a1ac4c6e.chunk.js

In 6.x, the following are needed (note the overall smaller size):

139516 Apr 16 20:50 enquiry-enquiry-module-ngfactory.0bed2b1d7655c7576367.js
 46607 Apr 16 20:50 enquiry-enquiry-module-ngfactory~pdp-pdp-module-ngfactory.a4e9b2991ef60cc239c8.js
 23721 Apr 16 20:50 enquiry-enquiry-module-ngfactory~pre-qualifier-pre-qualifier-module-ngfactory.36f6576df601b1444585.js

Still in 6.x, if the “pre-qualifier” route is then accessed after the above, only this chunk is needed:

141947 Apr 16 20:50 pre-qualifier-pre-qualifier-module-ngfactory.91b73a077e1186581f3d.js

In this case, note that since the common elements of the “pre-qualifier” route have already been downloaded from the following during “enquiry”, it does not need to be downloaded and initialized again:

 23721 Apr 16 20:50 enquiry-enquiry-module-ngfactory~pre-qualifier-pre-qualifier-module-ngfactory.36f6576df601b1444585.js

This new behavior also has advantages when using route preloading. In this scenario, only the chunks that are immediately needed are downloaded and then the rest are downloaded in the background as the user is navigating the application. This allows the user to more immediately access and use the application while allowing near instant access to the remainder of the application due to the background preloading.

Also, in regards to the larger size (in this case a ~3% increase), the new heuristics prevent common chunks of an unoptimized size of less then 30Kb. This is most likely the cause of the overall size difference as smaller common modules are not meeting this threshold. The settings will be fine-tuned in the CLI in upcoming versions. Additional information such as provided here will be very helpful in this process. And again thank you for taking the time to provide them.

[hansl]

Duplicate of #10294. Please keep discussions there.