プロダクションビルドの圧縮 — エンドツーエンド最適化

プロダクションビルドのMinification

プロダクションビルドのminificationは、ビルドパイプラインの一部としてすべてのフロントエンドアセット — JavaScript、CSS、HTML — を最適化するプロセスです。モダンバンドラーはこれを自動的に処理しますが、設定を理解することでトレードオフを制御できます。

webpackの設定

webpackはJavaScriptにTerser、CSSにcssnano（css-minimizer-webpack-plugin経由）を使用します：

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

module.exports = {
  mode: 'production', // デフォルトでminificationを有効化
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: { drop_console: true },
          mangle: { safari10: true },
        },
      }),
      new CssMinimizerPlugin(),
    ],
  },
};

Viteの設定

Viteは開発にesbuild、プロダクションにRollup + Terserを使用します：

// vite.config.js
export default {
  build: {
    minify: 'terser', // または'esbuild'（高速だが最適化度は低い）
    terserOptions: {
      compress: { drop_console: true },
    },
    cssMinify: true, // デフォルトでesbuildを使用
  },
};

Next.js

Next.jsはSWC（Speedy Web Compiler）を使用してプロダクションビルドでminificationを自動的に処理します。基本的なminificationには設定不要です。カスタムオプションはnext.config.jsで利用可能です：

module.exports = {
  swcMinify: true, // Next.js 13+でデフォルト
  compiler: {
    removeConsole: { exclude: ['error'] },
  },
};

Minificationを超えて：Tree Shaking

Tree shakingはバンドルから未使用のexportを排除します。ES modules（import/export）で動作し、プロダクションビルドではデフォルトで有効です。package.jsonでパッケージをside-effect-freeとしてマークします：

{
  "sideEffects": false
}

コード分割

コード分割はバンドルをオンデマンドで読み込まれる小さなチャンクに分割します。minificationと組み合わせることで、コードの総サイズと初期ページビューで読み込まれる量の両方を削減します。

ビルドの検証

プロダクションビルドは必ず検証してください：

• webpack-bundle-analyzerやrollup-plugin-visualizerでバンドルサイズを確認
• minification後の機能テスト（特にアグレッシブなオプションを使用する場合）
• 開発ビルドとプロダクションビルドのLighthouseスコアを比較