Introduction
Use source map explorer to analyze the bundle size of a React app.
Steps
1. Install source-map-explorer
1 | npm install -g source-map-explorer |
Turn on source map
In package.json, add the following line to the build script:
1 | "build": "GENERATE_SOURCEMAP=true react-scripts build" |
If this doesn’t work, open environment config file .env.production and add the following line:
1 | GENERATE_SOURCEMAP=true |
Don’t forget to set it to false after you finish analyzing the bundle size. source map should never be enabled in production.
2. Build the React app
1 | npm run build |
3. Analyze the bundle size
1 | source-map-explorer build/static/js/*.js |
The output will show you the size of each file in the bundle, and the size of each dependency.