Project Optimisation with Webpack Bundle Analyzer

Webpack is an indispensable part of modern web development processes. Acting as a module packager, this tool converts JavaScript modules into files that can be used in the browser. However, as projects grow and become more complex, the size and complexity of the packages created also increases. This is where webpack-bundle-analyzer comes in.

What is Webpack Bundle Analyzer?

Webpack-bundle-analyzer is a plugin that visualises the size of Webpack output files as an interactive and zoomable treemap. By showing the contents of your bundles with their actual size, this tool helps you identify which modules take up the most space and which modules are accidentally added there.

Why Should We Use Webpack Bundle Analyzer?

• Performance Optimisation: You can detect unnecessary code and large dependencies to improve the load time of your application.
• Debugging: You can find modules that are included by mistake and reduce the package size by removing them.
• Analysis and Decision Making: By better understanding the structure of your packages, you can decide which libraries and modules are best suited for your project.

  🚀 Example Project

  In this section, we will present a sample project that demonstrates the use of webpack-bundle-analyzer in a simple React application. The project will show how you can use webpack-bundle-analyzer to analyse the size and performance of the application.

  1.Create a new React project:As a first step, let’s create a React project. You can use a tool like create-react-app for this

npx create-react-app example-bundle-analyzer

2. Switch to the project directory: Switch to the created project directory.

cd example-bundle-analyzer

3. Install Webpack Bundle Analyser: While in the project directory, let’s install Webpack Bundle Analyser.

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

4. Update the Webpack configuration: Let’s configure the Webpack Bundle Analyzer by creating the webpack.config.js file of your React project or customising the configuration files provided by react-scripts.

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // Other configuration settings...
  plugins: [
    // Other plugins...
    isProduction && new BundleAnalyzerPlugin(),
  ].filter(Boolean),
};

5.Run the project: Add the following command to the scripts section in the package.json file. With this command we will be able to run the bundle analyser.

"analyze": "npm run build -- --stats && npx webpack-bundle-analyzer ./build/bundle-stats.json"

npm run analyze

We developed a simple React application using webpack-bundle-analyzer. I highly recommend using this tool to analyse the size and performance of your application.

You can access the source codes of the sample project from this link. 🔗