Vite 8 徹底解説 - Rolldown が既定になった新メジャーと 8.1 の新機能

Vite 8 徹底解説 - Rolldown が既定になった新メジャーと 8.1 の新機能

作成日:
読了:12
更新日:
この記事を読む人におすすめPR / Amazonアソシエイト

当サイトは Amazon.co.jp を宣伝しリンクすることで紹介料を得る手段を提供する、Amazonアソシエイト・プログラムの参加者です。価格・在庫はリンク先の最新情報をご確認ください。

前回のVite 7 と Rolldown の移行記事では、Rolldown を「将来のデフォルトバンドラ」として紹介しました。その将来がついに正式版になりました。Vite 8.0 は2026年3月12日に安定版(GA)としてリリースされ、Rust 製バンドラ Rolldown が opt-in なしの既定バンドラとして採用されています。2026年7月時点の最新は 8.1 系(最新パッチは v8.1.5、Vite 8.1 は2026年6月23日リリース)です。

この記事は Vite 7 記事の続きにあたります。Vite 8 で何が変わったのかを、実際にアップグレードするときに詰まりやすい順で整理していきます。数値やバージョンは vite.dev と voidzero.dev の公式情報を一次ソースにしています。

Vite 8 の変更点を3行で

まず全体像です。

  • Rolldown が既定バンドラに。従来の「開発は esbuild・本番は Rollup」という2バンドラ体制が Rolldown 1つに統合されました。
  • Full Bundle Mode(実験的)が登場。開発時もバンドルすることで、大規模アプリの起動とリロードを高速化します。
  • 破壊的変更として、Node 要件・build.target の引き上げ・設定オプション名の変更(rollupOptions から rolldownOptions へ)などがあります。

順に見ていきます。

Rolldown が既定バンドラに統合された

Vite 8 の最大の変更は、Rolldown が単一の統合バンドラとして既定採用された点です。

Vite 7 まではバンドラが2つに分かれていました。開発サーバーでは高速な esbuild を、本番ビルドでは成熟した Rollup を使う構成です。この分業は実用的でしたが、開発時と本番時で挙動やプラグインの扱いに差が生まれる原因にもなっていました。Vite 8 では、この両方を Rust 製の Rolldown に統合しています。

公式は Rolldown について「up to 10-30x faster builds while maintaining full plugin compatibility」(プラグイン互換性を保ったまま最大10〜30倍高速なビルド)と表現しています。開発時の依存関係の事前バンドル(pre-bundling)については、これまで担っていた esbuild と 同等(on par)の速度とされています。

公式ブログでは実際の採用事例として、次のようなビルド時間の短縮が挙げられています。

  • Linear: 46秒から6秒へ
  • Ramp: 約57%削減
  • Beehiiv: 約64%削減

これらはあくまで公式ブログが紹介する事例であり、手元のプロジェクトで同じ倍率が出るとは限りません。とはいえ、バンドラ由来のビルド時間が大きく縮む可能性がある、という方向性は明確です。

気になるのはプラグイン互換性ですが、公式は「多くの既存 Vite プラグインは Vite 8 でそのまま動作する」としています。これは Rolldown が Rollup・Vite と同じプラグイン API をサポートしているためです。Rollup 向けに書かれたプラグイン資産をそのまま活かせるのは、移行のハードルを大きく下げます。

Rolldown 本体は VoidZero(Vite の作者 Evan You 氏が設立した会社)の傘下で開発されており、Rolldown 1.0 は2026年5月7日にリリースされました。内部では同じく VoidZero 傘下の Oxc(Rust 製の JavaScript ツールチェーン)を利用しています。なお VoidZero については Cloudflare への参画が発表されており、詳細はCloudflare が VoidZero を買収の記事に譲ります。

Full Bundle Mode(実験的)

Vite 8 では、開発時にもソースをバンドルする Full Bundle Mode が実験的機能として追加されました。

Vite は元々「開発時はバンドルしない(ネイティブ ESM を使う)」という設計思想で高速化を実現してきましたが、モジュール数が膨大な大規模アプリでは、ブラウザが大量のリクエストを捌くコストが無視できなくなります。Full Bundle Mode は、開発時にもバンドルすることでこの課題に対処するアプローチです。

8.0 の発表時点では、次の数値が示されました。

  • 開発サーバー起動: 約3倍高速
  • フルリロード: 約40%高速
  • ネットワークリクエスト数: 約1/10

さらに 8.1 では、別のテストケース(1万コンポーネント規模の React アプリ)で「約15倍高速な起動・約10倍高速なフルリロード」という結果が示されています。

WARNING

8.0 の「3倍・40%・1/10」と、8.1 の「約15倍・約10倍」はそれぞれ別のテストケースの数値です。測定対象が異なるので、同じ土俵の数字として混同しないよう注意してください。いずれも大規模ケースほど効果が出やすい傾向を示すものです。

Full Bundle Mode はあくまで実験的(experimental)な機能です。本番運用の前提にするのではなく、まずは検証用のブランチなどで挙動を確かめることをおすすめします。

@vitejs/plugin-react v6

Vite 8 と同時に、React 向け公式プラグインの @vitejs/plugin-react v6 がリリースされました(最新は 6.0.3)。

このメジャーで大きいのは、React Fast Refresh(React Refresh)の変換処理に Oxc を採用し、これまで依存していた Babel を依存関係から削除した点です。これによりインストールサイズが縮小されています(削減量の具体的な MB 数は公表されていません)。

Babel が外れることで、プラグインのセットアップがシンプルになり、Rust ベースのツールチェーンで一貫した構成に近づきます。React 本体の最適化については、React Compiler の実践ガイドもあわせて参照してください。

移行で詰まる破壊的変更

ここからは、実際のアップグレードで引っかかりやすい破壊的変更です。

Node.js の要件

Vite 8 の Node.js 要件は ^20.19.0 || >=22.12.0 です。これは Vite 7 と同じ要件で、変更はありません。すでに Vite 7 に上げていれば、この点は追加対応不要です。CI や package.jsonengines、開発者の手元の Node を先に確認しておきましょう。

build.target の引き上げ

既定のブラウザターゲットが引き上げられました。トランスパイル結果が対象とする最小ブラウザバージョンが上がるため、古いブラウザをサポート対象にしている場合は注意が必要です。

ブラウザ旧(Vite 7)新(Vite 8)
Chrome107111
Edge107111
Firefox104114
Safari16.016.4

古いブラウザを引き続きサポートする必要がある場合は、build.target を明示的に指定して上書きしてください。

最小化ツールと設定オプションの変更

JS の最小化(minify)が Oxc Minifier、CSS の最小化が Lightning CSS の既定に変わりました。あわせて、設定オプションの名前もいくつか変わっています。

  • build.rollupOptions から build.rolldownOptions
  • optimizeDeps.esbuildOptions から optimizeDeps.rolldownOptions
  • esbuild オプションから oxc オプションへ

旧設定に対しては互換レイヤーが自動変換を行うため、いきなり全部が壊れるわけではありませんが、いずれ新しい名前へ移すのが望ましいです。設定ファイルの before / after は次のようになります。

// Vite 7 まで
import { defineConfig } from 'vite'
 
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020',
    },
  },
})
// Vite 8 以降
import { defineConfig } from 'vite'
 
export default defineConfig({
  build: {
    rolldownOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
  optimizeDeps: {
    rolldownOptions: {
      target: 'es2020',
    },
  },
})

インストールサイズの増加

依存構成が変わったことで、インストールサイズは Vite 7 比で約15MB増になります(内訳は lightningcss が約10MB、Rolldown が約5MB)。なお esbuild は optional dependency(任意依存)に変わりました。CI のキャッシュ容量やコンテナイメージのサイズが気になる場合は、この増分を見込んでおくとよいでしょう。

移行チェックリスト

移行時に確認したい項目をまとめます。

  • Node.js が ^20.19.0 || >=22.12.0 を満たしているか(Vite 7 からなら据え置き)
  • build.rollupOptionsbuild.rolldownOptions へ書き換えたか(互換レイヤーはあるが移行推奨)
  • optimizeDeps.esbuildOptionsoptimizeDeps.rolldownOptions へ書き換えたか
  • esbuild オプションを oxc へ移したか
  • 古いブラウザ対応が必要なら build.target を明示指定したか
  • 利用中のプラグインが Vite 8 で動作するか(多くはそのまま動くが要確認)
  • インストールサイズ増(約15MB)が CI やイメージ容量に影響しないか

Vite 8.1 とその他の新機能

Rolldown 化以外にも、Vite 8 系では開発体験まわりの新機能が追加されています。

  • 統合 Devtools: devtools オプションで有効化できる開発者向けツールが統合されました。
  • ブラウザコンソール転送: server.forwardConsole により、ブラウザのコンソール出力をターミナル側へ転送できます。コーディングエージェントに開発サーバーを触らせる場面などで、ログを拾いやすくなります。
  • tsconfig の paths サポート: paths によるパスエイリアスがビルトインでサポートされました。
  • emitDecoratorMetadata サポート: デコレータのメタデータ出力に対応しました。
  • Wasm SSR サポート: サーバーサイドレンダリング環境での WebAssembly をサポートします。

さらに Vite 8.1(2026年6月23日)では、次のような機能が加わりました。

  • Experimental Chunk Import Map
  • Lightning CSS の機能拡張
  • import.meta.globcaseSensitive オプション

テスト環境の観点では、Vite 上に構築される Vitest 4 のブラウザモードもあわせて追随しています。エコシステム全体として Rolldown ベースへ移行が進んでいる状況です。

エコシステムの対応状況

大きなメジャー変更で気になるのがフレームワーク側の追随ですが、公式は主要フレームワークの協力を明記しています。SvelteKit・React Router・Storybook・Astro・Nuxt などがプレビュー段階で rolldown-vite をテスト・協力してきた、とされています。

各フレームワークがどのバージョンで Vite 8 に正式対応するかは二次情報になるため、ここでは断定しません。利用中のフレームワークについては、それぞれの公式リリースノートで対応状況を確認してください(例えば Astro 7 のリリース記事など、フレームワーク側の動向も参考になります)。

まとめ

Vite 8 は、長らく「将来のデフォルト」とされてきた Rolldown を正式な既定バンドラに据えたメジャーです。開発と本番で分かれていた2バンドラ体制が Rolldown に統合され、ビルド速度とプラグイン互換性の両立が図られました。

移行の要点は次のとおりです。

  • Rolldown が既定化。プラグインの多くはそのまま動作する
  • Node 要件は Vite 7 と同じ ^20.19.0 || >=22.12.0
  • build.target の引き上げと、rollupOptions から rolldownOptions への設定移行に注意
  • Full Bundle Mode は実験的機能として検証から始める
  • インストールサイズは約15MB増

すでに Vite 7 に上げてある環境であれば、Node 要件が据え置きな分、移行のハードルは比較的低めです。設定オプションの書き換えと build.target の確認を中心に、検証環境で挙動を見ながら進めるのがおすすめです。

Vite 7 と Rolldown - アップグレード前に押さえる Node 要件・ブラウザターゲット・バンドラ移行

Vite 7 と Rolldown - アップグレード前に押さえる Node 要件・ブラウザターゲット・バンドラ移行

7

Vite 7 の変更点を、アップグレードで詰まりやすい順に整理します。Node.js 20.19+/22.12+ 要件、デフォルトブラウザターゲットの baseline-widely-available への変更、Rust 製バンドラ Rolldown(rolldown-vite)への移行、Sass legacy API 削除など、移行前に知っておくべき差分をまとめます。

CloudflareがVoidZeroを買収 - Vite / Vitest / Rolldown / Oxc エコシステムの今後とVite+

CloudflareがVoidZeroを買収 - Vite / Vitest / Rolldown / Oxc エコシステムの今後とVite+

10

2026年6月4日、CloudflareがVite・Vitest・Rolldown・Oxcを擁するVoidZeroを買収しました。VoidZeroとは何か、Evan Youが統一を進めてきたツールチェーン、当初有償から完全MITオープンソースへ転換したVite+、買収の狙い(AI-nativeなWebとCloudflareへの統合)、そして「ベンダー中立性は保たれるのか」という開発者の懸念まで、Cloudflare・VoidZero・Viteの公式発表を一次ソースに整理します。

Tailwind CSS v4 実践移行 - JS設定から CSS-first と @theme へどう移すか

Tailwind CSS v4 実践移行 - JS設定から CSS-first と @theme へどう移すか

10

Tailwind CSS v4 への移行を、単なる新機能紹介ではなく「設定思想の転換」として整理します。自動アップグレードツール、@tailwind ディレクティブから @import への変更、tailwind.config.js から @theme への移行、@tailwindcss/postcss / vite などパッケージ分離、ブラウザ要件、詰まりやすいユーティリティ改名まで、移行設計の勘所をまとめます。