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 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:
- Explore the content of your bundles.
- Find out the biggest modules in your bundles.
- 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
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:
Let’s make it more sophisticated & add a script entry to our package.json. Under scripts add the following line:
... “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.