Bundle size got bigger between

[rokerkony]

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]

Thank you for running some comparison tests.
Is the code identical?

6633 Apr 16 20:24 index.html vs 162287 Apr 16 20:50 index.html seems very odd.
Can you describe what is in the 162k file?

[rokerkony]

I'm sorry for misscommunication. We are run during a postbuild critical on index.html and it failed and generated whole bootstrap into it... I ran it again, it went through and corrected value is in ng@6 is:
6797 Apr 16 21:50 index.html

numbers in total:

old     | new     | difference
2876062 | 2951427 | 75365

Now the size difference is not huge but still there is some.

Weird part for me is that based on the name of chunks, one chunk is split into e.g. 3 parts (enquiry-enquiry***). It looks that it is influenced by change to webpack@4. But it also means that user would need to download more resources at the request.

[rokerkony]

to answer also a question, the only change in the code is refactoring for rxjs@6 so mostly change in import statements

[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.

[rokerkony]

Thank you @clydin for the explanation. If you would like to get more insights later, I would like to help as possible. I'm also on ng-conf — if you're here as well, we could meet, chat and you could take a look at the code and our build process...

[hansl]

Duplicate of #10294. Please keep discussions there.

[angular-automatic-lock-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.}