Optimization

In production environments, reducing file sizes and splitting code must be actively adopted to improve application loading speeds and save traffic costs. Webpack provides several optimizing capabilities for this purpose.

SplitChunks Plugin (Code Splitting)

By moving duplicated dependencies to separate chunks, the overall bundle size can be minimized, thereby maximizing browser caching efficiency.

module.exports = {
  // ... omitted ...
  optimization: {
    splitChunks: {
      chunks: 'all', // Include both synchronous and asynchronous modules
    },
  },
};

Terser Plugin (Code Minification)

In Webpack 5, setting mode: 'production' automatically runs the TerserPlugin out-of-the-box to minify and obfuscate your JavaScript code. You can also import and configure the plugin explicitly when additional settings are required.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // Remove console.log in production
        }
      }
    })],
  },
};

Tree Shaking

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax (import and export). In production mode, Webpack handles Tree Shaking automatically, and you can inform Webpack about which files can be safely eliminated via the "sideEffects" property in your package.json.