What's in the bundle? Create React App edition

If you want to check what is in the bundle for Create React App based project, the easiest way would be to use source-map-explorer:

# install it
npm install -g source-map-explorer
# or
yarn global add source-map-explorer
# build the bundle
npm build
# or
yarn build
# inspect the bundle
source-map-explorer build/static/js/main.js

This will give you basic info. If you feel like this is not enough, you also can use Webpack's analyse. To use it generate bundle.json like this:

NODE_ENV=production ./node_modules/webpack/bin/webpack.js --config node_modules/react-scripts/config/webpack.config.prod.js --profile --json > bundle.json

and use it with Webpack's analyse. Snippet taken from this ticket, thanks to jennifersmith.

If you suspect that you have a cyclic dependency you can use Cyclic Dependency Checker:

# install it
npm install -g webpack-cyclic-dependency-checker
# or
yarn global add webpack-cyclic-dependency-checker
# use bundle.json from the previous step
iscyclic bundle.json

Comments

[stereobooster]

yarn eject
yarn add webpack-cli
NODE_ENV=production ./node_modules/webpack-cli/bin/cli.js --config config/webpack.config.prod.js --profile --json > bundle.json