• install webpack-bundle-analyzer and config that in your webpack config.
  • try to use the webpack code splitting feature to reduce the file sizes at the first load time.


you don't need to eject. try this:

  1. install the analyser:enter image description here
➜  simple-react-router git:(master) ✗ npm install webpack-bundle-analyzer --save-dev

  1. create a new file, i called mine: sample.js
➜  simple-react-router git:(master) ✗ cat sample.js 
process.env.node_env = "production"
var bundleanalyzerplugin = require("webpack-bundle-analyzer")

const webpackconfigprod = require("react-scripts/config/")

  new bundleanalyzerplugin({
    analyzermode: "static",
    reportfilename: "report.html",

  1. run with node
➜  simple-react-router git:(master) ✗ node sample.js                                
browserslist: caniuse-lite is outdated. please run next command `npm update caniuse-lite browserslist`
creating an optimized production build...
webpack bundle analyzer saved report to /users/dixitk13/code/simple-react-router/build/report.html
compiled successfully.

file sizes after gzip:

  54.49 kb  build/static/js/1.0ee1e308.chunk.js
  1.9 kb    build/static/js/main.73bea786.chunk.js
  763 b     build/static/js/runtime~main.229c360f.js

a new browser tab should open for you.


as per the official create react app documentation (

below are the steps:

step 1: add source map explorer

npm install --save source-map-explorer

alternatively, you may use yarn:

yarn add source-map-explorer

step 2: include npm script

"scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

step 3: run the scripts to build the app

npm run build

step 4: run the scripts to analyze the build created in step3

npm run analyze

now you should see a screen in your browser opened like this enter image description here

Related Query

More Query from same tag