get total bundle size in create-react-app (CRA)

Question

Running yarn build in my CRA app prints out useful information including bundle sizes. Is there a way to extract just the Javascript and CSS bundle sizes?

Answer 1

Install source-map-explorer:

• npm - npm i --dev source-map-explorer

• yarn - yarn add -D source-map-explorer

Install jq

From the project directory run (install brew install coreutils and replace numfmt with gnumfmt in OS X):

$ source-map-explorer 'build/static/js/*' --gzip --json | jq '.results[] | .totalBytes' | paste -s -d+ - | bc | numfmt --to=iec --suffix=B to get the total size of Javascript bundle (gzipped)

$ source-map-explorer 'build/static/css/*' --gzip --json | jq '.results[] | .totalBytes' | paste -s -d+ - | bc | numfmt --to=iec --suffix=B to get the total size of CSS bundle (gzipped)