search

SAP / spartacus

Spartacus is a lean, Angular-based JavaScript storefront for SAP Commerce Cloud that communicates exclusively through the Commerce REST API.
Apache License 2.0
741 stars 388 forks source link

After angular 13 upgrade in our repo, in dev mode a lot of JS files are loaded on the page start #15457

Closed Platonn closed 2 years ago

Platonn commented 2 years ago

Tell us the version of Spartacus

To Reproduce Steps to reproduce the behavior:

  1. yarn start
  2. Open Network tab in chrome dev tools
  3. open http://localhost:4200
  4. See there are a lot of JS files loaded on the page start image
Platonn commented 2 years ago

It's not an issue.

Since ng13 those small JS files are created by Webpack only in dev mode, but not in prod mode.

They are created for every CSS file with a "bundleName" key configured in angular.json. See our angular.json: https://github.com/SAP/spartacus/blob/68d8e673dd5b3f7a0790a8e74f1211e85be498c0/angular.json#L35-L80

Those small JS files created by Webpack are not related to our main JS code and don't affect our code-splitting efforts. Our code-splitted JS files in dev mode keep to have names like the following:

feature-libs_cart_base_components_mini-cart_public_api_ts.js
feature-libs_user_account_public_api_ts.js
Platonn commented 2 years ago

For reference, I'm attaching below the build outputs:

Angular 12, our repo, prod build

(develop branch at the moment of writing)

Initial Chunk Files                           | Names                |       Size
main.b669716383e6844d81ba.js                  | main                 |    1.46 MB
order.5705f637ff985b30e2bd.css                | order                |  287.52 kB
styles.18e53af605255432df56.css               | styles               |  248.33 kB
cart.b99537d030280e316bd2.css                 | cart                 |  212.57 kB
epd-visualization.6aefa8b82d0437f35478.css    | epd-visualization    |  171.84 kB
product-configurator.837cfc578d7f1db59d43.css | product-configurator |   78.79 kB
polyfills.b6dfd71d11f1c3216452.js             | polyfills            |   48.83 kB
organization.29738b7cba32870f4457.css         | organization         |   48.02 kB
checkout.d6d5f7f1884d75c77a5c.css             | checkout             |   33.24 kB
product.9acc01d92db8cd144db9.css              | product              |   11.64 kB
storefinder.f0784e56194fe881686c.css          | storefinder          |    8.09 kB
runtime.b8a95ff4a303400a117a.js               | runtime              |    4.40 kB
user.499f35aae9a3a4fae8e9.css                 | user                 | 1009 bytes
qualtrics.31d6cfe0d16ae931b73c.css            | qualtrics            |    0 bytes

                                              | Initial Total        |    2.59 MB

Lazy Chunk Files                              | Names                |       Size
651.c45bcf32451371fe6eed.js                   | -                    |  298.33 kB
622.707b773893dfa8605768.js                   | -                    |  214.23 kB
526.e6579bcd3ba16349b537.js                   | -                    |   98.95 kB
629.6f077a745e5386b260e5.js                   | -                    |   92.36 kB
385.63e85c8042ad5e41cdb7.js                   | -                    |   69.00 kB
298.f6d9fcd6233b2af327f2.js                   | -                    |   62.78 kB
222.4514d08612956bdb9e74.js                   | -                    |   51.00 kB
363.b829c496c63ba9010d76.js                   | -                    |   49.87 kB
196.91737fcec0b18a2588de.js                   | -                    |   43.98 kB
284.356ba065cbb82924dae4.js                   | -                    |   42.14 kB
164.76add0bf6a990428af48.js                   | -                    |   41.79 kB
909.169657b15bc343c1f1e6.js                   | -                    |   41.53 kB
142.04ffa897451f74093fe0.js                   | -                    |   32.49 kB
177.0cdf02ee3970d1f62482.js                   | -                    |   28.78 kB
852.8288170aaebf9147c66d.js                   | -                    |   26.87 kB
183.ce9bc57e8bcea94d308f.js                   | -                    |   26.80 kB
47.69d00b042166d62f6bcd.js                    | -                    |   19.54 kB
4.0c1a25586bd67d8e8dca.js                     | -                    |   15.68 kB
694.c218640e5c3da4a2e0c1.js                   | -                    |   12.42 kB
974.9975840678d58149d5f3.js                   | -                    |   11.52 kB
879.632c58cd2c8bf0f49a97.js                   | -                    |    9.66 kB
282.9f88c31a371bd302b74d.js                   | -                    |    8.68 kB
984.b91f19fba08913b5530e.js                   | -                    |    7.84 kB
592.afc4fd7b8c11c3888ad4.js                   | common               |    4.56 kB
591.ed08febda76bdd2e3c7d.js                   | -                    |    4.30 kB
616.dbe95c5afeb664406d3c.js                   | -                    |    3.65 kB
691.189105a084d173759fd6.js                   | -                    |    3.55 kB
549.0aefec0c4c59bf228c88.js                   | -                    |    3.49 kB
139.8c66f7ea77e884f4e530.js                   | -                    |    2.76 kB
317.3ed0d3cb5eb86155a376.js                   | -                    |  322 bytes

Angular 13, our repo, prod build

(feature/GH-13916 branch at the moment of writing) (NOTE: it's almost the same as Angular 12 prod build above, + 50 kB in total)

Initial Chunk Files                       | Names                                               |   Raw Size | Estimated Transfer Size
main.2551f11b9615208e.js                  | main                                                |    1.47 MB |               315.87 kB
order.b9c9814166d7ee30.css                | order                                               |  297.54 kB |                32.11 kB
styles.257f8105cc6ba808.css               | styles                                              |  258.03 kB |                30.29 kB
cart.b2b4ca15a45ef074.css                 | cart                                                |  221.15 kB |                23.71 kB
epd-visualization.edd21e7d568233c7.css    | epd-visualization                                   |  180.04 kB |                20.11 kB
product-configurator.e5d9b02d05c98adb.css | product-configurator                                |   79.37 kB |                 6.29 kB
polyfills.1185d414413c175c.js             | polyfills                                           |   49.54 kB |                15.72 kB
organization.96e6b35eb68961f6.css         | organization                                        |   48.07 kB |                 5.66 kB
checkout.5443d98b53054650.css             | checkout                                            |   33.94 kB |                 3.23 kB
product.0c3490100a638903.css              | product                                             |   11.67 kB |                 1.81 kB
storefinder.7a1305ff7b8a4f16.css          | storefinder                                         |    8.21 kB |                 1.28 kB
runtime.3dcafe640b819424.js               | runtime                                             |    3.83 kB |                 1.81 kB
user.0f622a2d330cb6d4.css                 | user                                                | 1018 bytes |               339 bytes
qualtrics.ef46db3751d8e999.css            | qualtrics                                           |    0 bytes |                       -

                                          | Initial Total                                       |    2.64 MB |               458.23 kB

Lazy Chunk Files                          | Names                                               |   Raw Size | Estimated Transfer Size
751.15eb0465c7fc82fd.js                   | spartacus-organization-administration               |  294.94 kB |                34.27 kB
414.cb94ba508f381558.js                   | spartacus-product-configurator-rulebased-cpq        |  213.23 kB |                32.41 kB
966.ab0c412e4fc2ed48.js                   | spartacus-organization-order-approval               |   98.91 kB |                15.01 kB
105.06b9faeadf154f63.js                   | spartacus-checkout-base                             |   92.40 kB |                16.56 kB
33.c68224a8343d22b2.js                    | spartacus-epd-visualization                         |   69.25 kB |                13.33 kB
40.e04330f5d1293b1a.js                    | spartacus-cart-base                                 |   62.76 kB |                12.46 kB
775.0b82392060ddf9f4.js                   | spartacus-checkout-scheduled-replenishment          |   50.99 kB |                 9.75 kB
14.736e45ec9e54daa3.js                    | spartacus-cart-saved-cart                           |   49.54 kB |                 9.22 kB
127.2eca7668776a6929.js                   | spartacus-asm                                       |   43.41 kB |                16.02 kB
653.349d3eef8b26b1a9.js                   | spartacus-cart-quick-order                          |   42.16 kB |                 9.12 kB
158.9d9f80c5239e667f.js                   | spartacus-storefinder                               |   41.59 kB |                 8.62 kB
647.b56ab70ffe0a0f08.js                   | spartacus-user-profile                              |   41.51 kB |                 7.14 kB
671.72554bdb04482a17.js                   | spartacus-order                                     |   31.81 kB |                 5.03 kB
979.3ee3f061f34564f4.js                   | spartacus-organization-order-approval               |   28.60 kB |                 6.09 kB
641.bf5da074ee963117.js                   | spartacus-cart-import-export                        |   26.89 kB |                 5.66 kB
534.857126c6197488ff.js                   | spartacus-product-configurator-rulebased-cpq        |   26.77 kB |                 5.61 kB
342.efedb9391e7cf9b8.js                   | spartacus-product-configurator-textfield            |   19.27 kB |                 4.01 kB
574.d91176276bb44e87.js                   | spartacus-product-image-zoom                        |   15.70 kB |                 3.90 kB
829.762f3dc28827b234.js                   | spartacus-cart-wish-list                            |   12.45 kB |                 3.41 kB
664.c3f1c8bc5e9179f7.js                   | spartacus-digital-payments                          |   11.52 kB |                 3.11 kB
393.d06f0ec96c697a0b.js                   | spartacus-product-variants                          |    9.65 kB |                 2.32 kB
4.e8da8b95b71833f5.js                     | spartacus-user-account                              |    8.68 kB |                 2.54 kB
743.5c83203a84040fc6.js                   | spartacus-cdc                                       |    7.78 kB |                 2.56 kB
common.a9add7111747bf3b.js                | common                                              |    4.55 kB |                 1.66 kB
910.12c5d277e3de8b37.js                   | spartacus-cart-wish-list-components-add-to-wishlist |    4.30 kB |                 1.48 kB
986.4f04300d2b635513.js                   | spartacus-cart-base-components-mini-cart            |    3.65 kB |                 1.48 kB
874.bf4f4643948dfeee.js                   | spartacus-product-bulk-pricing                      |    3.54 kB |                 1.35 kB
747.d80fd1e9e97010d0.js                   | spartacus-smartedit                                 |    3.48 kB |                 1.15 kB
692.8080aa74186746b3.js                   | spartacus-qualtrics                                 |    2.76 kB |                 1.03 kB
281.e26d328aee69b96f.js                   | spartacus-tracking-personalization                  |  319 bytes |               214 bytes

Angular 13, our repo, dev build

(feature/GH-13916 branch at the moment of writing) (PLEASE NOTE entries with .css and .js, e.g. order.css, order.js)

Initial Chunk Files                                                     | Names                                               |  Raw Size
main.js                                                                 | main                                                |   5.35 MB | 
vendor.js                                                               | vendor                                              |   3.74 MB | 
order.css, order.js                                                     | order                                               | 570.54 kB | 
styles.css, styles.js                                                   | styles                                              | 526.65 kB | 
cart.css, cart.js                                                       | cart                                                | 480.48 kB | 
epd-visualization.css, epd-visualization.js                             | epd-visualization                                   | 435.18 kB | 
polyfills.js                                                            | polyfills                                           | 401.05 kB | 
product-configurator.css, product-configurator.js                       | product-configurator                                | 302.64 kB | 
organization.css, organization.js                                       | organization                                        | 267.81 kB | 
checkout.css, checkout.js                                               | checkout                                            | 253.22 kB | 
product.css, product.js                                                 | product                                             | 227.13 kB | 
storefinder.css, storefinder.js                                         | storefinder                                         | 223.25 kB | 
user.css, user.js                                                       | user                                                | 214.92 kB | 
qualtrics.css, qualtrics.js                                             | qualtrics                                           | 213.73 kB | 
runtime.js                                                              | runtime                                             |  14.30 kB | 

                                                                        | Initial Total                                       |  13.12 MB

Lazy Chunk Files                                                        | Names                                               |  Raw Size
feature-libs_organization_administration_public_api_ts.js               | spartacus-organization-administration               |   1.78 MB | 
default-feature-libs_product-configurator_rulebased_public_api_ts.js    | spartacus-product-configurator-rulebased-cpq        |   1.06 MB | 
default-feature-libs_order_components_public_api_ts.js                  | spartacus-organization-order-approval               | 499.26 kB | 
default-feature-libs_checkout_base_public_api_ts.js                     | spartacus-checkout-base                             | 442.68 kB | 
feature-libs_cart_base_public_api_ts.js                                 | spartacus-cart-base                                 | 315.85 kB | 
integration-libs_epd-visualization_public_api_ts.js                     | spartacus-epd-visualization                         | 293.45 kB | 
feature-libs_checkout_scheduled-replenishment_public_api_ts.js          | spartacus-checkout-scheduled-replenishment          | 264.53 kB | 
feature-libs_cart_saved-cart_public_api_ts.js                           | spartacus-cart-saved-cart                           | 249.08 kB | 
feature-libs_user_profile_public_api_ts.js                              | spartacus-user-profile                              | 229.55 kB | 
feature-libs_storefinder_public_api_ts.js                               | spartacus-storefinder                               | 218.48 kB | 
feature-libs_order_public_api_ts.js                                     | spartacus-order                                     | 216.53 kB | 
feature-libs_asm_public_api_ts.js                                       | spartacus-asm                                       | 187.76 kB | 
feature-libs_organization_order-approval_public_api_ts.js               | spartacus-organization-order-approval               | 168.00 kB | 
feature-libs_cart_quick-order_public_api_ts.js                          | spartacus-cart-quick-order                          | 162.58 kB | 
feature-libs_cart_import-export_public_api_ts.js                        | spartacus-cart-import-export                        | 132.84 kB | 
feature-libs_product-configurator_textfield_public_api_ts.js            | spartacus-product-configurator-textfield            | 127.39 kB | 
feature-libs_product-configurator_rulebased_cpq_public_api_ts.js        | spartacus-product-configurator-rulebased-cpq        | 119.78 kB | 
feature-libs_product_image-zoom_public_api_ts.js                        | spartacus-product-image-zoom                        |  75.34 kB | 
feature-libs_user_account_public_api_ts.js                              | spartacus-user-account                              |  70.15 kB | 
feature-libs_cart_wish-list_public_api_ts.js                            | spartacus-cart-wish-list                            |  68.39 kB | 
integration-libs_digital-payments_public_api_ts.js                      | spartacus-digital-payments                          |  67.83 kB | 
feature-libs_product_variants_public_api_ts.js                          | spartacus-product-variants                          |  62.53 kB | 
integration-libs_cdc_public_api_ts.js                                   | spartacus-cdc                                       |  48.34 kB | 
feature-libs_product_bulk-pricing_public_api_ts.js                      | spartacus-product-bulk-pricing                      |  24.57 kB | 
feature-libs_cart_wish-list_components_add-to-wishlist_public_api_ts.js | spartacus-cart-wish-list-components-add-to-wishlist |  22.55 kB | 
feature-libs_qualtrics_public_api_ts.js                                 | spartacus-qualtrics                                 |  21.97 kB | 
feature-libs_cart_base_components_mini-cart_public_api_ts.js            | spartacus-cart-base-components-mini-cart            |  20.46 kB | 
default-feature-libs_cart_base_components_add-to-cart_public_api_ts.js  | spartacus-cart-base-components-add-to-cart          |  19.72 kB | 
feature-libs_smartedit_public_api_ts.js                                 | spartacus-smartedit                                 |  18.76 kB | 
feature-libs_tracking_personalization_public_api_ts.js                  | spartacus-tracking-personalization                  |   2.62 kB |