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ユーザーは、破壊的変更に注意しながらアップグレードを検討してください。

参考リソース

• Vite 公式ドキュメント
• Vite 6.0 リリースノート
• Vite GitHub

×

PR

×

PR