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.jsfile 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.
- 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.