Code Modules Bundle Size

core-modules-bundle-size.md

Code Modules Bundle Size Comparison

Option #1: CLI Tool

How does the CLI Tool work?

Generate JS files

• Includes core modules to package.json and install them
• Loop each of the node modules, take all JS files from each package
• Run each JS file through uglify-es to perform minifications and write minifiedJS to dist/ folder

Print module sizes

• Loop dist/ folder and get the sizes of each module
• VERBOSE=FALSE: Sum up the sizes of the files for each packages
• VERBOSE=TRUE: Print out each size of the file for each packages

What are the key deliveries?

• Get a better picture of the electrode core modules we are offering
• Can easily add/remove modules based on needs
• Can be applied to existing apps and figures out the percentage does core modules take

VERBOSE=FALSE view

+--------------------------------------------+---------+
|                 MODULE NAME                |   SIZE  |
|--------------------------------------------+---------|
|@walmart/npm-proxy                          |0.73 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-log-consumer             |0.81 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-redux-router-engine      |2.50 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-config                   |2.62 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-application              |2.65 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-ccm-preload              |3.32 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-metrics                  |3.76 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-ui-config                |3.86 kb  |
|--------------------------------------------+---------|
|@walmart/generator-electrode                |5.04 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-cookies                  |5.05 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-affiliate-cookies        |6.31 kb  |
|--------------------------------------------+---------|
|@walmart/wmreact-iconography                |6.66 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-csrf-jwt                 |7.69 kb  |
|--------------------------------------------+---------|
|@walmart/electrode-location-provider        |10.14 kb |
|--------------------------------------------+---------|
|@walmart/electrode-fetch                    |12.66 kb |
|--------------------------------------------+---------|
|@walmart/wmreact-tempo-core                 |13.06 kb |
|--------------------------------------------+---------|
|@walmart/electrode-archetype-react-component|16.51 kb |
|--------------------------------------------+---------|
|@walmart/electrode-sso-plugin               |17.15 kb |
|--------------------------------------------+---------|
|@walmart/electrode-archetype-react-app      |17.34 kb |
|--------------------------------------------+---------|
|@walmart/electrode-seo-metadata             |18.64 kb |
|--------------------------------------------+---------|
|@walmart/electrode-index-page               |18.72 kb |
|--------------------------------------------+---------|
|@walmart/electrode-health                   |20.62 kb |
|--------------------------------------------+---------|
|@walmart/electrode-ccm-initializer          |21.60 kb |
|--------------------------------------------+---------|
|@walmart/react-utils                        |21.67 kb |
|--------------------------------------------+---------|
|@walmart/electrode-logging                  |26.36 kb |
|--------------------------------------------+---------|
|@walmart/electrode-react-webapp2            |27.18 kb |
|--------------------------------------------+---------|
|@walmart/wmreact-creative-modules           |33.47 kb |
|--------------------------------------------+---------|
|@walmart/wmreact-layout                     |41.29 kb |
|--------------------------------------------+---------|
|@walmart/wmreact-ads                        |41.82 kb |
|--------------------------------------------+---------|
|@walmart/electrode-swapi                    |42.57 kb |
|--------------------------------------------+---------|
|@walmart/wmreact-interactive                |44.45 kb |
|--------------------------------------------+---------|
|@walmart/wmreact-base                       |46.97 kb |
|--------------------------------------------+---------|
|@walmart/wmreact-infinite                   |70.57 kb |
|--------------------------------------------+---------|
|@walmart/wmreact-esi-components             |109.56 kb|
|--------------------------------------------+---------|
|@walmart/wmreact-stateless-fields           |226.51 kb|
|--------------------------------------------+---------|
|@walmart/wmreact-icons                      |238.83 kb|
|--------------------------------------------+---------|
|@walmart/electrode-node-pm                  |375.48 kb|
|--------------------------------------------+---------|
|@walmart/electrode-wml-server               |391.87 kb|
|--------------------------------------------+---------|
|@walmart/electrode-wml-app                  |432.92 kb|
+--------------------------------------------+---------+

VERBOSE=TRUE view

This may generate a big table, exported to a txt file instead.

Option #2: Shell Application

VERBOSE=FALSE view

+----------------------------+-------------+---------------+---------------+
|         MODULE NAME        |  STAT SIZE  |  Parsed SIZE  | GZipped SIZE  |
|----------------------------+-------------+---------------+---------------|
|@walmart/electrode-cookies  |6.09 kb      |    2.69 kb    | 1.18 kb       |
|----------------------------+-------------+---------------+---------------|
|@walmart/wmreact-base       |72.89 kb     |    23.93 kb   | 5.4 kb        |
|----------------------------+-------------+---------------+---------------|
|@walmart/electrode-ui-config|1.06 kb      |    0.53kb     | 0.29 kb       |
|----------------------------+-------------+---------------+---------------|
|@walmart/electrode-fetch    |8.11 kb      |    4.02 kb    | 1.53 kb       |
+----------------------------+-------------+---------------+---------------+

VERBOSE=TRUE view

+----------------------------------------------------------------+--------+
|                           MODULE NAME                          |   SIZE |
|----------------------------------------------------------------+--------|
| @walmart/electrode-cookies/lib/csindex.js                      | 0.15 kb|
|----------------------------------------------------------------+--------|
| @walmart/electrode-cookies/cookies-js/index.js                 | 5.94 kb|
|----------------------------------------------------------------+--------|
| @walmart/electrode-ui-config/dist/csindex.js                   | 0.16 kb|
|----------------------------------------------------------------+--------|
| @walmart/electrode-ui-config/dist/ui-config.js                 | 0.89 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/index.js                             | 2.67 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/body.js                   | 4.75 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/body-mobile-header.js     | 2.58 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/body-tablet-header.js     | 2.41 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/body-desktop-header.js    | 2.17 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/copy.js                   | 1.72 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/copy-openleading.js       | 1.21 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/copy-small.js             | 1.13 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/copy-mini.js              | 1.12 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/descriptions.js           | 3.04 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/description-term.js       | 0.94 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/description-description.js| 1.01 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/heading.js                | 1.37 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/icon.js                   | 3.66 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/icon-validation-marker.js | 1.86 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/image.js                  | 5.39 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/image-loader.js           | 2.03 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/link.js                   | 4.40 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/link-arrow.js             | 3.22 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/link-more.js              | 3.06 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/link-dropdown.js          | 3.12 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/tile.js                   | 3.27 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/video.js                  | 6.48 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/components/skip-link.js              | 5.76 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/wrappers/focus-on-mount.js           | 1.46 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/wrappers/focus-on-change.js          | 1.92 kb|
|----------------------------------------------------------------+--------|
| @walmart/wmreact-base/lib/wrappers/focus-helpers.js            | 1.15 kb|
|----------------------------------------------------------------+--------|
| @walmart/electrode-fetch/dist/client-fetch.js                  | 0.89 kb|
|----------------------------------------------------------------+--------|
| @walmart/electrode-fetch/dist/electrode-fetch.js               | 7.21 kb|
+----------------------------------------------------------------+--------+