How to analyze create react app build size and reduce it?

user_10795348 0
Viewed 14393

I have been following this guide: https://create-react-app.dev/docs/analyzing-the-bundle-size/ and just about to run the analyze command to see how big my app is. is this the best way to check bundle/build size in React/JS?

also is there a way to not include certain files from the prod build? like tests? Does CRA handle this automatically?

reactjs bundle javascript
3 Answers

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 enter image description here

user_67156060

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

user_16083200

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.
user_54564760
Related