Production Build Minification — End-to-End Optimization

Production Build Minification

Production build minification is the process of optimizing all frontend assets — JavaScript, CSS, and HTML — as part of your build pipeline. Modern bundlers handle this automatically, but understanding the configuration gives you control over the trade-offs.

webpack Configuration

webpack uses Terser for JavaScript and cssnano (via css-minimizer-webpack-plugin) for CSS:

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

module.exports = {
  mode: 'production', // Enables minification by default
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: { drop_console: true },
          mangle: { safari10: true },
        },
      }),
      new CssMinimizerPlugin(),
    ],
  },
};

Vite Configuration

Vite uses esbuild for development and Rollup + Terser for production:

// vite.config.js
export default {
  build: {
    minify: 'terser', // or 'esbuild' (faster but less optimal)
    terserOptions: {
      compress: { drop_console: true },
    },
    cssMinify: true, // Uses esbuild for CSS by default
  },
};

Next.js

Next.js handles minification automatically in production builds using SWC (Speedy Web Compiler). No configuration is needed for basic minification. Custom options are available in next.config.js:

module.exports = {
  swcMinify: true, // Default in Next.js 13+
  compiler: {
    removeConsole: { exclude: ['error'] },
  },
};

Beyond Minification: Tree Shaking

Tree shaking eliminates unused exports from your bundle. It works with ES modules (import/export) and is enabled by default in production builds. Mark packages as side-effect-free in package.json:

{
  "sideEffects": false
}

Code Splitting

Code splitting divides your bundle into smaller chunks that load on demand. Combined with minification, this reduces both the total code size and the amount loaded on initial page view.

Build Verification

Always verify your production build:

• Check bundle sizes with webpack-bundle-analyzer or rollup-plugin-visualizer
• Test functionality after minification (especially if using aggressive options)
• Compare Lighthouse scores between development and production builds