Optimize your React application with webpack-bundle-analyzer

Webpack-bundle-analyzer speed optimization

webpack-bundle-analyzer demonstration
  1. Explore the content of your bundles.
  2. Find out the biggest modules in your bundles.
  3. Find out unused/unwanted modules.

Adding webpack-bundle-analyzer to create-react-app 1

To use Webpack-bundle-analyzer we need first to install webpack-bundle-analyzer:

npm i -D webpack-bundle-analyzer
# OR
yarn add -D webpack-bundle-analyzer
node analyse.js
“scripts”: {
“analyse”: “node analyse.js”, ...},

Adding webpack-bundle-analyzer to create-react-app 2 & 3

create-react-app 2 & 3 are using a different configuration of webpack than the first version. So, we need to change a little the script we used above:

👉 Don’t forget to clap if you like the post



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store