Vite 6がリリース - Environment APIと次世代ビルド最適化

Vite 6の概要

Vite 6は、フロントエンドビルドツールの新たなマイルストーンです。Environment APIの導入により、SSR、クライアント、ワーカーなど異なる実行環境を統一的に扱えるようになりました。

flowchart TB
    subgraph Vite6["Vite 6 Architecture"]
        subgraph EnvAPI["Environment API (New)"]
            Client["Client<br/>Environment"]
            SSR["SSR<br/>Environment"]
            Worker["Worker<br/>Environment"]
        end

        ModuleGraph["Module Graph<br/>各環境ごとに独立したモジュールグラフを管理"]

        subgraph Bundlers["Bundlers"]
            esbuild["esbuild<br/>(dev)"]
            Rollup["Rollup<br/>(build)"]
            Rolldown["Rolldown<br/>(future)"]
        end

        EnvAPI --> ModuleGraph
        ModuleGraph --> esbuild
        ModuleGraph --> Rollup
        ModuleGraph --> Rolldown
    end

Environment API

Vite 6の最大の変更点は、Environment APIの導入です。

従来のアプローチ vs 新しいアプローチ

// Vite 5以前: SSRは特別扱い
export default defineConfig({
  ssr: {
    noExternal: ['some-package'],
    target: 'node',
  },
});

// Vite 6: Environment APIで統一的に管理
export default defineConfig({
  environments: {
    client: {
      // クライアント固有の設定
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: 'src/entry-client.ts',
        },
      },
    },
    ssr: {
      // SSR固有の設定
      build: {
        outDir: 'dist/server',
        rollupOptions: {
          input: 'src/entry-server.ts',
        },
      },
      resolve: {
        noExternal: ['some-package'],
      },
    },
    worker: {
      // Web Worker固有の設定
      build: {
        outDir: 'dist/worker',
      },
    },
  },
});

カスタム環境の作成

// vite.config.ts
import { defineConfig, createEnvironment } from 'vite';

export default defineConfig({
  environments: {
    // Edge Runtimeなどのカスタム環境
    edge: createEnvironment({
      name: 'edge',
      consumer: 'server',
      webCompatible: true,
      build: {
        outDir: 'dist/edge',
        target: 'esnext',
        rollupOptions: {
          external: ['node:*'],
        },
      },
      resolve: {
        conditions: ['edge-light', 'worker', 'import', 'module'],
      },
    }),
  },
});

プラグインでの環境対応

// カスタムプラグイン
function myPlugin(): Plugin {
  return {
    name: 'my-plugin',

    // 環境ごとに異なる処理
    transform(code, id, options) {
      const environment = this.environment;

      if (environment.name === 'ssr') {
        // SSR固有の変換
        return transformForSSR(code);
      }

      if (environment.name === 'client') {
        // クライアント固有の変換
        return transformForClient(code);
      }

      return code;
    },

    // 環境が初期化されたとき
    configureEnvironment(environment) {
      console.log(`Configuring environment: ${environment.name}`);
    },

    // ホットアップデート
    hotUpdate({ environment, modules }) {
      if (environment.name === 'client') {
        // クライアントのみHMR
        return modules;
      }
      // SSRは再起動
      return [];
    },
  };
}

パフォーマンス改善

パフォーマンス比較

最適化設定

// vite.config.ts
export default defineConfig({
  // 依存関係の事前バンドル最適化
  optimizeDeps: {
    include: ['lodash-es', 'react', 'react-dom'],
    exclude: ['your-local-package'],

    // 複数エントリポイントの最適化
    entries: ['src/main.tsx', 'src/worker.ts'],

    // esbuildオプション
    esbuildOptions: {
      target: 'esnext',
      supported: {
        'top-level-await': true,
      },
    },
  },

  // ビルド最適化
  build: {
    // ターゲット
    target: 'esnext',

    // チャンク分割戦略
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es', 'date-fns'],
        },
      },
    },

    // CSSコード分割
    cssCodeSplit: true,

    // ソースマップ
    sourcemap: 'hidden',

    // 圧縮
    minify: 'esbuild',
  },
});

CSS改善

Lightning CSS統合強化

// vite.config.ts
export default defineConfig({
  css: {
    // Lightning CSSをデフォルトで使用
    transformer: 'lightningcss',

    lightningcss: {
      // ブラウザターゲット
      targets: {
        chrome: 100,
        firefox: 100,
        safari: 15,
      },

      // CSSモジュール
      cssModules: {
        pattern: '[hash]_[local]',
      },

      // 機能フラグ
      drafts: {
        customMedia: true,
      },
    },
  },
});

CSS Modules型生成

// vite.config.ts
export default defineConfig({
  css: {
    modules: {
      // 型定義ファイルの自動生成
      localsConvention: 'camelCaseOnly',
      generateScopedName: '[name]__[local]___[hash:base64:5]',
    },
  },

  plugins: [
    // CSS Modules型生成プラグイン
    cssModulesTyped(),
  ],
});

/* styles.module.css */
.button {
  background: blue;
}

.buttonPrimary {
  composes: button;
  background: green;
}

// styles.module.css.d.ts (自動生成)
declare const styles: {
  readonly button: string;
  readonly buttonPrimary: string;
};
export default styles;

新しい設定オプション

JSON設定の改善

// vite.config.ts
export default defineConfig({
  json: {
    // 名前付きエクスポートを有効化
    namedExports: true,

    // JSONをESモジュールに変換
    stringify: false,
  },
});

// 使用例
import { version, name } from './package.json';
console.log(`${name}@${version}`);

Globインポートの改善

// 動的インポートのパターン
const modules = import.meta.glob('./modules/*.ts', {
  // 即時インポート
  eager: true,

  // 特定のエクスポートのみ
  import: 'default',

  // クエリパラメータ
  query: { raw: true },
});

// 型安全なglobインポート
const pages = import.meta.glob<{
  default: React.ComponentType;
  meta: { title: string };
}>('./pages/**/*.tsx');

破壊的変更への対応

Node.js最小バージョン

// package.json
{
  "engines": {
    "node": ">=18.0.0"
  }
}

CJS Node API廃止

// Vite 5以前: CJSもサポート
const { createServer } = require('vite');

// Vite 6: ESMのみ
import { createServer } from 'vite';

移行スクリプト

# 自動マイグレーション
npx vite-migrate@latest

# 手動確認
npx vite --version

Rolldown統合の準備

Vite 6は将来的なRolldown統合に向けた基盤を整えています。

flowchart TB
    subgraph Current["現在 (Vite 6)"]
        esbuild_cur["esbuild<br/>(dev)"]
        Rollup_cur["Rollup<br/>(build)"]
    end

    subgraph Future["将来 (Vite 7+)"]
        Rolldown["Rolldown (Rust)<br/>• esbuildの速度<br/>• Rollupの互換性<br/>• 統一されたビルドパイプライン"]
    end

    Current --> Future

期待される効果:

• 開発/本番の一貫性向上
• ビルド速度 3-5x 改善
• メモリ使用量削減

フレームワーク対応

React + Vite 6

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      // React Compiler対応
      babel: {
        plugins: [['babel-plugin-react-compiler', {}]],
      },
    }),
  ],
  environments: {
    client: {
      build: {
        target: 'esnext',
      },
    },
  },
});

Vue + Vite 6

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  environments: {
    client: {
      resolve: {
        alias: {
          '@': '/src',
        },
      },
    },
  },
});

参考リンク

• Vite 6.0 リリースノート
• Environment API RFC
• Rolldown Project
• Vite マイグレーションガイド