Source map explorer analyzes JavaScript bundles using the source maps. This helps you understand where code bloat is coming from.
To add Source map explorer to a Create React App project, follow these steps:
npm install --save source-map-explorer
Then in package.json
, add the following line to scripts
:
"scripts": {
+ "analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
Then to analyze the bundle run the production build then run the analyze script.
npm run build
npm run analyze
Reference : https://create-react-app.dev/docs/analyzing-the-bundle-size/