Optimize React web apps with webpack-bundle-analyzer

Hamza HAMIDI
Jun 24, 2019 · 2 min read

The website speed makes the first impression about your business. Low website speed is one of the most frustrating things that will turn people off about your resource.

In this article we’ll only talk about React apps optimization.

Webpack-bundle-analyzer speed optimization

webpack-bundle-analyzer demonstration

Webpack-bundle-analyzer is a webpack plugin which helps you visualize the size of your bundles with an interactive zoom-able tree-map.

Webpack-bundle-analyzer helps you:

  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

Then, let’s create a file analyse.js at the root of the repository with the following content:

You can now test your little script with just running the command:

node analyse.js

Let’s make it more sophisticated & add a script entry to our package.json. Under scripts add the following line:

“scripts”: {
...
“analyse”: “node analyse.js”, ...},

Now, you can run webpack-bundle-analyzer with just npm run analyse Or yarn analyse .

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:

You can also add the analyse script entry in your package.json.


And That’s it. If you face any issue leave a comment or open an issue in this repository.

links:

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade