[Solved]-How to analyze create react app build size and reduce it?-Reactjs

steps:

• 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:

➜  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")
  .bundleanalyzerplugin

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

webpackconfigprod.plugins.push(
  new bundleanalyzerplugin({
    analyzermode: "static",
    reportfilename: "report.html",
  })
)

require("react-scripts/scripts/build")

2. 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 (https://create-react-app.dev/docs/analyzing-the-bundle-size/):

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