Optimize your React application with webpack-bundle-analyzer

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:

• Portfolio
• Github
• Twitter

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