Vite 6 - 次世代フロントエンドビルドツール

Vite 6とは

Vite 6は、フロントエンド開発のための高速ビルドツールの最新メジャーバージョンです。ESモジュールのネイティブサポートと高速なHMR（Hot Module Replacement）で知られ、React、Vue、Svelte など主要フレームワークで採用されています。

参考: Vite 6.0 is out!

Vite 6の新機能

1. Environment API

複数の環境（クライアント、SSR、ワーカーなど）を統一的に管理できる新しいAPIです。

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

export default defineConfig({
  environments: {
    client: {
      // クライアント環境の設定
      build: {
        outDir: 'dist/client',
      },
    },
    ssr: {
      // SSR環境の設定
      build: {
        outDir: 'dist/server',
        ssr: true,
      },
    },
    worker: {
      // Web Worker環境の設定
      webCompatible: true,
    },
  },
});

2. モジュールランナーAPI

サーバーサイドでのモジュール実行を効率化する新しいAPIです。

import { createServer } from 'vite';

const server = await createServer();
const runner = server.environments.ssr.runner;

// SSR環境でモジュールを実行
const module = await runner.import('/src/entry-server.ts');
const html = await module.render();

3. プラグインAPIの改善

フックが環境ごとに分離され、より細かな制御が可能になりました。

// プラグインの例
function myPlugin(): Plugin {
  return {
    name: 'my-plugin',
    // 環境ごとに異なる処理
    transform(code, id) {
      if (this.environment.name === 'ssr') {
        // SSR専用の変換
        return transformForSSR(code);
      }
      return transformForClient(code);
    },
  };
}

4. パフォーマンス改善

Rolldown統合への準備

Vite 6はRolldown（Rustで書かれた次世代バンドラー）との統合を見据えた設計になっています。

flowchart LR
    subgraph Current["現在"]
        Vite6["Vite 6"]
        esbuild["esbuild<br/>(開発)"]
        Rollup["Rollup<br/>(本番)"]
        Vite6 --> esbuild
        Vite6 --> Rollup
    end

    subgraph Future["将来"]
        ViteNext["Vite 7+"]
        Rolldown["Rolldown<br/>(統一)"]
        ViteNext --> Rolldown
    end

    Current --> Future

基本的な使い方

プロジェクト作成

# npm
npm create vite@latest my-app

# pnpm
pnpm create vite my-app

# bun
bun create vite my-app

設定ファイル

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    target: 'esnext',
    minify: 'esbuild',
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

フレームワーク対応

React

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

export default defineConfig({
  plugins: [react()],
});

Vue

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

export default defineConfig({
  plugins: [vue()],
});

Svelte

// vite.config.ts
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
});

SSRサポートの強化

// server.js - Node.jsサーバー
import express from 'express';
import { createServer } from 'vite';

const app = express();

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom',
});

app.use(vite.middlewares);

app.use('*', async (req, res) => {
  const url = req.originalUrl;

  // SSRレンダリング
  const { render } = await vite.environments.ssr.runner.import(
    '/src/entry-server.ts'
  );

  const html = await render(url);
  res.send(html);
});

app.listen(3000);

CSS機能

CSS Modules

/* Button.module.css */
.button {
  padding: 8px 16px;
  border-radius: 4px;
}

.primary {
  background: blue;
  color: white;
}

import styles from './Button.module.css';

function Button() {
  return <button className={`${styles.button} ${styles.primary}`}>Click</button>;
}

Lightning CSS

// vite.config.ts
export default defineConfig({
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%')),
    },
  },
});

便利なプラグイン

// vite.config.ts
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';
import { compression } from 'vite-plugin-compression2';

export default defineConfig({
  plugins: [
    // バンドルサイズ可視化
    visualizer({
      open: true,
      gzipSize: true,
    }),
    // Gzip/Brotli圧縮
    compression({
      algorithm: 'gzip',
    }),
    compression({
      algorithm: 'brotliCompress',
    }),
  ],
});

マイグレーション

Vite 5からの移行

# パッケージ更新
npm install vite@6

# 非推奨APIの確認
npx vite build 2>&1 | grep -i deprecat

主な破壊的変更：

• resolve.conditionsのデフォルト値変更
• SSR関連APIの刷新
• 一部のプラグインフックの変更

Vite vs 他のビルドツール

まとめ

Vite 6は、フロントエンド開発体験をさらに向上させる重要なリリースです。

• Environment API: 複数環境の統一管理
• モジュールランナー: 効率的なSSR実行
• Rolldown準備: 将来の高速化への布石
• 30%高速化: 開発サーバー起動の改善

Vite 5ユーザーは、破壊的変更に注意しながらアップグレードを検討してください。