Webpack optimization: a complete guide for web developers

Webpack is one of the most popular tools for building modern web applications. However, an incorrectly configured Webpack can significantly slow down the development and build process, as well as produce suboptimal production bundles. In this article, we’ll cover all aspects of Webpack optimization to achieve maximum performance in both development and production.

Why Webpack optimization matters

Webpack performs many tasks, from code transpilation to resource optimization. An unoptimized Webpack configuration can lead to:

Slow builds in development mode
Large production bundles
Long application load times
Inefficient use of resources
Caching problems

Understanding Webpack optimization principles is critical to creating fast and efficient web applications.

Analyzing Webpack performance

Before starting optimization, analyze the current Webpack configuration and identify bottlenecks.

Analysis tools

Webpack Bundle Analyzer:

CodeShell

# Установка
npm install webpack-bundle-analyzer --save-dev

# Использование
npx webpack-bundle-analyzer dist/stats.json

Speed Measure Plugin:

CodeShell

# Установка
npm install speed-measure-webpack-plugin --save-dev

# Конфигурация
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // конфигурация webpack
});

Webpack Dashboard:

CodeShell

# Установка
npm install webpack-dashboard --save-dev

# Использование в package.json
{
  "scripts": {
    "dev": "webpack-dashboard -- webpack serve"
  }
}

Metrics to track

Build time - total time taken to run webpack
Bundle size - size of the resulting files
Number of modules - number of modules processed
Load time - time it takes to load the application in a browser
Cache efficiency - caching effectiveness

Optimizing development mode

Optimizing development mode is critical to improving developer productivity.

Hot Module Replacement (HMR)

CodeJavaScript

// webpack.config.js
module.exports = {
  devServer: {
    hot: true,
    liveReload: false,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

Source map optimization

CodeJavaScript

// webpack.config.js
module.exports = {
  devtool: 'eval-cheap-module-source-map', // Быстро для разработки
  // или
  devtool: 'source-map', // Медленно, но точно
};

Excluding node_modules

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

Loader caching

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
      },
    ],
  },
};

Optimizing production mode

Production optimization aims to create minimal and efficient bundles.

Minification

CodeJavaScript

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
          },
          mangle: true,
        },
      }),
    ],
  },
};

Tree shaking

CodeJavaScript

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false,
  },
};

Side effects configuration

CodeJSON

// package.json
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.global.js"
  ]
}

Code splitting

Code splitting lets you divide code into multiple bundles that are loaded on demand.

Entry points

CodeJavaScript

// webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Dynamic imports

CodeJavaScript

// В коде
const loadComponent = async () => {
  const { default: Component } = await import('./Component.js');
  return Component;
};

SplitChunksPlugin configuration

CodeJavaScript

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10,
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          enforce: true,
          priority: 5,
        },
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
};

Optimizing resource loading

Loading resources correctly can significantly improve application performance.

Asset modules

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8kb
          },
        },
      },
    ],
  },
};

Image optimization

CodeJavaScript

// webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            plugins: [
              ['gifsicle', { interlaced: true }],
              ['jpegtran', { progressive: true }],
              ['optipng', { optimizationLevel: 5 }],
              ['svgo', { name: 'preset-default' }],
            ],
          },
        },
      }),
    ],
  },
};

Font optimization

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash][ext]',
        },
      },
    ],
  },
};

Caching

Configuring caching correctly is critical to performance.

Output filenames

CodeJavaScript

// webpack.config.js
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
  },
};

Runtime chunk

CodeJavaScript

// webpack.config.js
module.exports = {
  optimization: {
    runtimeChunk: 'single',
  },
};

Module Federation

CodeJavaScript

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

Loader optimization

Configuring loaders correctly can significantly speed up builds.

Loader order

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

Loader exclusions

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
    ],
  },
};

Parallel processing

CodeJavaScript

// webpack.config.js
const threadLoader = require('thread-loader');

threadLoader.warmup(
  {
    workers: 4,
    workerParallelJobs: 50,
  },
  [
    'babel-loader',
    'css-loader',
  ]
);

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'thread-loader',
          'babel-loader',
        ],
      },
    ],
  },
};

Plugin optimization

Choosing and configuring plugins correctly is critical to performance.

HtmlWebpackPlugin

CodeJavaScript

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
  ],
};

MiniCssExtractPlugin

CodeJavaScript

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
};

DefinePlugin

CodeJavaScript

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.API_URL': JSON.stringify('https://api.example.com'),
    }),
  ],
};

Optimizing for different environments

Different environments (development, testing, production) require different optimization approaches.

Environment-specific configuration

CodeJavaScript

// webpack.config.js
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
  optimization: {
    minimize: isProduction,
    splitChunks: isProduction ? {
      chunks: 'all',
    } : false,
  },
};

Multiple configurations

CodeJavaScript

// webpack.config.js
module.exports = [
  {
    name: 'client',
    entry: './src/client.js',
    target: 'web',
  },
  {
    name: 'server',
    entry: './src/server.js',
    target: 'node',
  },
];

Monitoring and analytics

Regularly monitoring Webpack performance helps identify problems and optimize builds.

Bundle analysis

CodeJavaScript

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
  ],
};

Performance budgets

CodeJavaScript

// webpack.config.js
module.exports = {
  performance: {
    hints: 'warning',
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
};

CI/CD integration

CodeYAML

# .github/workflows/webpack.yml
name: Webpack Build
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Build and analyze
        run: npm run build:analyze

Webpack optimization best practices

1. Development mode

Use fast source maps
Enable HMR for faster development
Cache loaders
Exclude node_modules

2. Production mode

Minify code
Enable tree shaking
Use contenthash for caching
Optimize images

3. Code splitting

Split vendor and application code
Use dynamic imports
Configure cacheGroups correctly
Apply route-based splitting

4. Caching

Use contenthash in filenames
Configure the runtime chunk
Apply Module Federation for microfrontends
Optimize cache efficiency

5. Monitoring

Analyze bundles regularly
Set performance budgets
Monitor build time
Track bundle size

Conclusion

Webpack optimization is a complex task that requires an understanding of the various aspects of building web applications. Proper Webpack optimization can significantly improve development speed, build time, and application performance.

Key points to remember:

Analyze performance regularly
Optimize development mode for faster development
Configure the production build for minimal bundles
Use code splitting for lazy loading
Configure caching correctly
Monitor metrics continuously

By following these recommendations, you can create fast and efficient web applications with optimized Webpack builds that deliver a great user experience and high development performance.

Why Webpack optimization matters

Webpack performs many tasks, from code transpilation to resource optimization. An unoptimized Webpack configuration can lead to:

Slow builds in development mode
Large production bundles
Long application load times
Inefficient use of resources
Caching problems

Understanding Webpack optimization principles is critical to creating fast and efficient web applications.

Analyzing Webpack performance

Before starting optimization, analyze the current Webpack configuration and identify bottlenecks.

Analysis tools

Webpack Bundle Analyzer:

CodeShell

# Установка
npm install webpack-bundle-analyzer --save-dev

# Использование
npx webpack-bundle-analyzer dist/stats.json

Speed Measure Plugin:

CodeShell

# Установка
npm install speed-measure-webpack-plugin --save-dev

# Конфигурация
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // конфигурация webpack
});

Webpack Dashboard:

CodeShell

# Установка
npm install webpack-dashboard --save-dev

# Использование в package.json
{
  "scripts": {
    "dev": "webpack-dashboard -- webpack serve"
  }
}

Metrics to track

Build time - total time taken to run webpack
Bundle size - size of the resulting files
Number of modules - number of modules processed
Load time - time it takes to load the application in a browser
Cache efficiency - caching effectiveness

Optimizing development mode

Optimizing development mode is critical to improving developer productivity.

Hot Module Replacement (HMR)

CodeJavaScript

// webpack.config.js
module.exports = {
  devServer: {
    hot: true,
    liveReload: false,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
};

Source map optimization

CodeJavaScript

// webpack.config.js
module.exports = {
  devtool: 'eval-cheap-module-source-map', // Быстро для разработки
  // или
  devtool: 'source-map', // Медленно, но точно
};

Excluding node_modules

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

Loader caching

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
      },
    ],
  },
};

Optimizing production mode

Production optimization aims to create minimal and efficient bundles.

Minification

CodeJavaScript

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
          },
          mangle: true,
        },
      }),
    ],
  },
};

Tree shaking

CodeJavaScript

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false,
  },
};

Side effects configuration

CodeJSON

// package.json
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.global.js"
  ]
}

Code splitting

Code splitting lets you divide code into multiple bundles that are loaded on demand.

Entry points

CodeJavaScript

// webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

Dynamic imports

CodeJavaScript

// В коде
const loadComponent = async () => {
  const { default: Component } = await import('./Component.js');
  return Component;
};

SplitChunksPlugin configuration

CodeJavaScript

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10,
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          enforce: true,
          priority: 5,
        },
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
};

Optimizing resource loading

Loading resources correctly can significantly improve application performance.

Asset modules

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8kb
          },
        },
      },
    ],
  },
};

Image optimization

CodeJavaScript

// webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            plugins: [
              ['gifsicle', { interlaced: true }],
              ['jpegtran', { progressive: true }],
              ['optipng', { optimizationLevel: 5 }],
              ['svgo', { name: 'preset-default' }],
            ],
          },
        },
      }),
    ],
  },
};

Font optimization

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash][ext]',
        },
      },
    ],
  },
};

Caching

Configuring caching correctly is critical to performance.

Output filenames

CodeJavaScript

// webpack.config.js
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
  },
};

Runtime chunk

CodeJavaScript

// webpack.config.js
module.exports = {
  optimization: {
    runtimeChunk: 'single',
  },
};

Module Federation

CodeJavaScript

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

Loader optimization

Configuring loaders correctly can significantly speed up builds.

Loader order

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

Loader exclusions

CodeJavaScript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
    ],
  },
};

Parallel processing

CodeJavaScript

// webpack.config.js
const threadLoader = require('thread-loader');

threadLoader.warmup(
  {
    workers: 4,
    workerParallelJobs: 50,
  },
  [
    'babel-loader',
    'css-loader',
  ]
);

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'thread-loader',
          'babel-loader',
        ],
      },
    ],
  },
};

Plugin optimization

Choosing and configuring plugins correctly is critical to performance.

HtmlWebpackPlugin

CodeJavaScript

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
  ],
};

MiniCssExtractPlugin

CodeJavaScript

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
};

DefinePlugin

CodeJavaScript

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production'),
      'process.env.API_URL': JSON.stringify('https://api.example.com'),
    }),
  ],
};

Optimizing for different environments

Different environments (development, testing, production) require different optimization approaches.

Environment-specific configuration

CodeJavaScript

// webpack.config.js
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
  optimization: {
    minimize: isProduction,
    splitChunks: isProduction ? {
      chunks: 'all',
    } : false,
  },
};

Multiple configurations

CodeJavaScript

// webpack.config.js
module.exports = [
  {
    name: 'client',
    entry: './src/client.js',
    target: 'web',
  },
  {
    name: 'server',
    entry: './src/server.js',
    target: 'node',
  },
];

Monitoring and analytics

Regularly monitoring Webpack performance helps identify problems and optimize builds.

Bundle analysis

CodeJavaScript

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
  ],
};

Performance budgets

CodeJavaScript

// webpack.config.js
module.exports = {
  performance: {
    hints: 'warning',
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
};

CI/CD integration

CodeYAML

# .github/workflows/webpack.yml
name: Webpack Build
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm install
      - name: Build and analyze
        run: npm run build:analyze

Webpack optimization best practices

1. Development mode

Use fast source maps
Enable HMR for faster development
Cache loaders
Exclude node_modules

2. Production mode

Minify code
Enable tree shaking
Use contenthash for caching
Optimize images

3. Code splitting

Split vendor and application code
Use dynamic imports
Configure cacheGroups correctly
Apply route-based splitting

4. Caching

Use contenthash in filenames
Configure the runtime chunk
Apply Module Federation for microfrontends
Optimize cache efficiency

5. Monitoring

Analyze bundles regularly
Set performance budgets
Monitor build time
Track bundle size

Conclusion

Key points to remember:

Analyze performance regularly
Optimize development mode for faster development
Configure the production build for minimal bundles
Use code splitting for lazy loading
Configure caching correctly
Monitor metrics continuously

By following these recommendations, you can create fast and efficient web applications with optimized Webpack builds that deliver a great user experience and high development performance.

Why Webpack optimization matters

Analyzing Webpack performance

Analysis tools

Metrics to track

Optimizing development mode

Hot Module Replacement (HMR)

Source map optimization

Excluding node_modules

Loader caching

Optimizing production mode

Minification

Tree shaking

Side effects configuration

Code splitting

Entry points

Dynamic imports

SplitChunksPlugin configuration

Optimizing resource loading

Asset modules

Image optimization

Font optimization

Caching

Output filenames

Runtime chunk

Module Federation

Loader optimization

Loader order

Loader exclusions

Parallel processing

Plugin optimization

HtmlWebpackPlugin

MiniCssExtractPlugin

DefinePlugin

Optimizing for different environments

Environment-specific configuration

Multiple configurations

Monitoring and analytics

Bundle analysis

Performance budgets

CI/CD integration

Webpack optimization best practices

1. Development mode

2. Production mode

3. Code splitting

4. Caching

5. Monitoring

Conclusion

The website loads slowly

Terms by topic

Code minification: what it is and why it matters

Lazy Loading: What It Is and How to Implement It

SERP: what it is and how to look better in search results

WebP: What It Is and Why Convert Images

CSS and JS minification: how much does it really speed up a website?

SQL Formatter: Format queries online—why and how

XML Formatter: format and validate XML online

Check your website

Feedback

Why Webpack optimization matters

Analyzing Webpack performance

Analysis tools

Metrics to track

Optimizing development mode

Hot Module Replacement (HMR)

Source map optimization

Excluding node_modules

Loader caching

Optimizing production mode

Minification

Tree shaking

Side effects configuration

Code splitting

Entry points

Dynamic imports

SplitChunksPlugin configuration

Optimizing resource loading

Asset modules

Image optimization

Font optimization

Caching