How to build bundle-stats.json in create react app?

Question

I need to build bundle-stats.json to work with webpack-bundle-analyzer. Here how i'm trying build it , but it does not creating any file.

npm run build -- --stats

Could you please help me

Answer 1

stats have been remove from CRA see

It's recommended to use source-map-explorer

npm i -g source-map-explorer
source-map-explorer 'build/static/js/*.js'.

Answer 2

The --stats flag was added back into CRA in this PR.

So you can use webpack-bundle-analyzer again.

Answer 3

You can do it with @craco/craco which is a tool to use a custom webpack configuration with Create React App.

As explained on this article:

1. Install @craco/craco and webpack-bundle-analyzer

   npm install @craco/craco webpack-bundle-analyzer --save-dev
   

2. Create a file named craco.config.js in the root of your project folder with this content:

   const BundleAnalyzerPlugin =
     require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
   
   module.exports = function () {
     return {
       webpack: {
         plugins: [new BundleAnalyzerPlugin({ analyzerMode: "server" })],
       },
     };
   };
   

3. Add this "analyze" script to your package.json scripts sections:

   {
     ...
     "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject",
   +   "analyze": "craco build"
     }
   }
   

4. Now run:

   npm run analyze
   

Because you set the analyzerMode to "server" in your craco config, you will automatically get your browser open with the results served as a webpage (you can use the "json" option if you want the output without involving the browser)

Answer 4

Firstly, add the webpack-bundle-analyzer to your dev dependecies:

yarn add -D webpack-bundle-analyzer

Then you can sequentially run commands:

yarn build -- --stats

yarn webpack-bundle-analyzer ./build/bundle-stats.json

Or, for your convenience, you can add the script to your package.json:

"scripts": {
  ...
  "analyze": "yarn build -- --stats && yarn webpack-bundle-analyzer ./build/bundle-stats.json"
}

Instead of yarn you can use npm, just edit the command accordingly.

Then you can run the script using yarn analyze or the scripts runner UI available in VS Code like I do. You can also add a script for deleting the build folder if this already exists before creating a new one. For this, dependently on your platform, you can use the cmd or bash command:

• cmd: if exist build\\ ( rmdir /s /q .\\build )
• bash: [ -d 'build' ] && rm -r build

So the final solution will look like this:

"scripts": {
  ...
  "analyze": "yarn remove_build && yarn build -- --stats && yarn webpack-bundle-analyzer ./build/bundle-stats.json",
  "remove_build": "if exist build\\ ( rmdir /s /q .\\build )"
}