Analyze React App Size

Manthan Ankolekar - Jul 31 '22 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

Then to analyze the bundle run the production build then run the analyze script.

npm run build
npm run analyze
Enter fullscreen mode Exit fullscreen mode

Reference : https://create-react-app.dev/docs/analyzing-the-bundle-size/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .