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 マイグレーションガイド

参考リソース

• Vite 公式ドキュメント
• Vite GitHub
• Vite 6.0 リリースブログ

×

PR

×

PR