[Without Ejecting] Analyze Create React App Bundle Size

The webpack-bundle-analyzer is a great package to analyze the bundle size of ReactJS app. However, in order to use that plugin, we need to edit the webpack config. React apps made with Create-react-app needs to eject the app in order to edit it. But we’ve got a solution!

Analyze bundle size of apps created using Create React App

1. Install webpack-bundle-analyzer npm i -D webpack-bundle-analyzer
2. Create a new build.js in the root directory with the following code
3. Generate the report using node build.js

A report.html will be opened automatically in your browser. If not, manually open it in the browser from bulid/report.html