analyzing-the-bundle-size.md

id	title	sidebar_label
analyzing-the-bundle-size	Analyzing the Bundle Size	Analyzing Bundle Size

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

Alternatively you may use yarn:

yarn add source-map-explorer

Then in package.json, add the following line to scripts:

   "scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "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