Optimizing Webpack 5: Reducing Build Time by 35%

At Flipkart, we were facing significant challenges with our build times. Our CI pipeline was taking over 10 minutes for a full build, which was slowing down our deployment velocity. This is the story of how we migrated to Webpack 5 and achieved a 35% reduction in build time.

The Challenge

Our monorepo contained multiple applications, and each build was taking progressively longer as the codebase grew. The main issues were:

• No persistent caching between builds
• Inefficient asset handling with custom loaders
• Large bundle sizes affecting both build and runtime performance

Migration Strategy

1. Persistent Caching

Webpack 5's built-in persistent caching was a game-changer. We configured it to cache to the filesystem:

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
};

This single change reduced our CI build time by approximately 35% on subsequent builds.

2. Asset Modules

We replaced our custom loaders with Webpack 5's native asset modules:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.svg$/,
        type: 'asset/inline',
      },
    ],
  },
};

This simplified our configuration and reduced bundle size by ~15%.

3. Brotli Compression

We enabled Brotli compression for production builds:

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

This further reduced our bundle size by ~30%.

Results

• Build Time: Reduced from ~10 minutes to ~6.5 minutes (35% improvement)
• Bundle Size: Reduced by 45% overall (15% from asset modules + 30% from Brotli)
• Configuration Complexity: Reduced by removing custom loaders

Key Takeaways

1. Persistent caching is essential for CI/CD pipelines
2. Native Webpack 5 features often outperform custom solutions
3. Compression can significantly reduce bundle sizes
4. Incremental migration is safer than a big-bang approach

The migration took about 2 weeks but the performance improvements were well worth the effort. Our deployment velocity increased significantly, and developers were happier with faster feedback loops.