Use core module bundle sizes cli tool instructions

core-modules-bundle-size-instructions.md

Core Module Bundle Size Instruction

Clone the CLI tool

Clone core-modules-bundle-size CLI tool to your local

git clone https://gecgithub01.walmart.com/s0d00px/core-modules-bundle-size

Update your package.json

"dependencies": {
  ...
  "electrode-archetype-react-app": "^5.4.6"
},
"devDependencies": {
  ...
  "@walmart/core-modules-bundle-size": <path-to-your-cloned-core-modules-bundle-size>
  "electrode-archetype-react-app-dev": "^5.4.6"
},
"scripts": {
  ...
  "bundle-report": "bundle-report"
}

Update your xclap.js

Note: You will need to preserve module ID comment in bundle output for optimizeStats.

process.env.OPTIMIZE_STATS = true;

Install modules

Note: If you haven't install fyn globally, please run npm install -g fyn beforehand.

fyn i

Gnerate report

clap optimize-stats
npm run bundle-report core
npm run bundle-report wmreact

Update your .gitignore

.etmp*

Home app demo result

m-c02sl0gsg8wm:home s0d00px$ npm run bundle-report core

> home-app@16.4.4 bundle-report /Users/s0d00px/Electrode/home
> bundle-report "core"

@walmart/electrode-cookies: 2.69 KB
@walmart/electrode-ui-config: 0.52 KB
@walmart/electrode-fetch: 4.03 KB
@walmart/electrode-application: 1.23 KB
modules bundle total: 8.47 KB
modules bundle percentage: 1.21 %
ad bundle total: 698.51 KB
=======================================
@walmart/electrode-cookies: 2.69 KB
@walmart/electrode-ui-config: 0.52 KB
@walmart/electrode-fetch: 4.03 KB
@walmart/electrode-application: 1.23 KB
modules bundle total: 8.47 KB
modules bundle percentage: 0.96 %
hp bundle total: 886.22 KB
=======================================
m-c02sl0gsg8wm:home s0d00px$ npm run bundle-report wmreact

> home-app@16.4.4 bundle-report /Users/s0d00px/Electrode/home
> bundle-report "wmreact"

@walmart/wmreact-tempo-core: 7.19 KB
@walmart/wmreact-analytics: 1.09 KB
@walmart/wmreact-icons: 3.12 KB
modules bundle total: 11.40 KB
modules bundle percentage: 1.63 %
ad bundle total: 698.51 KB
=======================================
@walmart/wmreact-tempo-core: 7.19 KB
@walmart/wmreact-analytics: 1.09 KB
@walmart/wmreact-icons: 3.12 KB
modules bundle total: 11.40 KB
modules bundle percentage: 1.29 %
hp bundle total: 886.22 KB
=======================================

Grocery app demo result

m-c02sl0gsg8wm:grocery-electrode s0d00px$ npm run bundle-report core

> grocery-electrode@1.0.0 bundle-report /Users/s0d00px/Electrode/grocery-electrode
> bundle-report "core"

@walmart/electrode-ui-config: 0.52 KB
@walmart/electrode-fetch: 3.94 KB
@walmart/electrode-cookies: 2.69 KB
@walmart/electrode-application: 1.24 KB
modules bundle total: 8.39 KB
modules bundle percentage: 0.44 %
checkout bundle total: 1925.48 KB
=======================================
@walmart/electrode-ui-config: 0.52 KB
@walmart/electrode-fetch: 3.94 KB
@walmart/electrode-cookies: 2.69 KB
@walmart/electrode-application: 1.24 KB
modules bundle total: 8.39 KB
modules bundle percentage: 0.60 %
discovery bundle total: 1390.12 KB
=======================================
m-c02sl0gsg8wm:grocery-electrode s0d00px$ npm run bundle-report wmreact

> grocery-electrode@1.0.0 bundle-report /Users/s0d00px/Electrode/grocery-electrode
> bundle-report "wmreact"

@walmart/wmreact-interactive: 4.04 KB
@walmart/wmreact-base: 24.01 KB
@walmart/wmreact-analytics: 11.43 KB
@walmart/wmreact-grocery-canary: 0.07 KB
@walmart/wmreact-containers: 15.56 KB
@walmart/wmreact-layout: 22.74 KB
@walmart/wmreact-stateless-fields: 19.77 KB
@walmart/wmreact-credit-card: 81.57 KB
@walmart/wmreact-env-info: 1.02 KB
@walmart/wmreact-validation: 46.84 KB
@walmart/wmreact-tempo-analytics-utils: 0.00 KB
@walmart/wmreact-modal: 9.76 KB
@walmart/wmreact-image-utils: 1.12 KB
@walmart/wmreact-table: 2.41 KB
@walmart/wmreact-carousel: 0.00 KB
@walmart/wmreact-athena-analytics-utils: 0.00 KB
@walmart/wmreact-local-storage: 0.00 KB
@walmart/wmreact-product-image-carousel: 0.00 KB
@walmart/wmreact-product-offers: 4.90 KB
@walmart/wmreact-state-chooser: 1.77 KB
modules bundle total: 247.02 KB
modules bundle percentage: 12.83 %
checkout bundle total: 1925.48 KB
=======================================
@walmart/wmreact-interactive: 10.02 KB
@walmart/wmreact-base: 3.91 KB
@walmart/wmreact-analytics: 11.43 KB
@walmart/wmreact-grocery-canary: 0.07 KB
@walmart/wmreact-containers: 15.14 KB
@walmart/wmreact-layout: 10.49 KB
@walmart/wmreact-stateless-fields: 8.75 KB
@walmart/wmreact-credit-card: 0.06 KB
@walmart/wmreact-env-info: 1.02 KB
@walmart/wmreact-validation: 0.02 KB
@walmart/wmreact-tempo-analytics-utils: 8.24 KB
@walmart/wmreact-modal: 0.01 KB
@walmart/wmreact-image-utils: 1.12 KB
@walmart/wmreact-table: 0.01 KB
@walmart/wmreact-carousel: 7.47 KB
@walmart/wmreact-athena-analytics-utils: 8.91 KB
@walmart/wmreact-local-storage: 2.08 KB
@walmart/wmreact-product-image-carousel: 16.52 KB
@walmart/wmreact-product-offers: 0.01 KB
@walmart/wmreact-state-chooser: 0.00 KB
@walmart/wmreact-tempo-core: 7.09 KB
@walmart/wmreact-zoomable-image: 10.00 KB
modules bundle total: 122.37 KB
modules bundle percentage: 8.80 %
discovery bundle total: 1390.12 KB
=======================================