analyzing-the-bundle-size.md

id: analyzing-the-bundle-size
title: Analyzing the Bundle Size
sidebar_label: 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