Using webpack-bundle-analyzer npm package step by step

Yesterday I came across a requirement to know the bundle size of npm modules, which we needed to analyze the performance improvement of my application. After searching on the web I found a solution to use webpack-bundle-analyzer. But in most of the blogs the steps was not clear to install and use it.

So, I am going to share the steps I followed to use it.

Go to the root directory of your project and open the terminal in your IDE(I am using vs code).

• Step 1: Install webpack-bundle-analyzer npm module as a development dependency.

npm install --save-dev webpack-bundle-analyzer

After performing the above step webpack-bundle-analyzer npm module will added into your package.json file under devDependencies section.

• Step 2: Now search webpack.config.js file in your project repo and at the top of this file add below line.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

• Step 3: After adding above line into webpack.config.js file. Search for the plugins: [ section in this file and add below line.

new BundleAnalyzerPlugin(),

• Step 4: Great all steps has been configured to use it. Now run your application using command npm start. You will see that two tabs will open in your default browser one is your application running url and another one is for webpack bundle analyzer. Url used by the analyzer will be Link

Done. Simple and fast
Please like this post if you find it useful.