Nevermind

WebpackからViteへ：スムーズな移行の旅

5 分

1. なぜ移行するのか？Webpackの悩み

Webpackは非常に強力で設定の自由度が高いモジュールバンドラーであり、長年にわたってフロントエンドプロジェクトの基盤でした。しかし、プロジェクトの規模が大きくなるにつれ、「バンドル」を中心とする考え方が性能上のボトルネックを生みます。

  • 遅いコールドスタート：開発サーバー（dev-server）を起動するたびに、Webpackは依存関係グラフ全体をたどり、すべてのモジュールをメモリ内にバンドルする必要があります。大規模なプロジェクトでは、この処理に数分かかることがあります。
  • 遅いホット更新（HMR）：ファイルを変更すると、Webpackは関連するモジュールを再計算して置き換える必要があります。ページ全体の再読み込みよりは速いものの、大規模プロジェクトでは数秒から十数秒遅れることもあり、開発の流れを中断します。

2. Viteはどのように問題を解決するのか？

フランス語で「速い」を意味するViteは、別の道を選びました。モダンブラウザーがネイティブESモジュール（ESM）をサポートしていることを活用し、ビルド工程を2つに分けます。

  • 開発時：Viteはサーバーを起動しますが、すべてのモジュールを事前にバンドルしません。代わりにブラウザーからのモジュール要求を受け取り、必要に応じてソースコードを変換して提供します。たとえばブラウザーがmain.jsを要求するとViteがそれを提供し、main.jsがButton.vueをimportするとブラウザーが再び要求を送り、Viteが変換済みのButton.vueを提供します。そのため開発サーバーはほぼ瞬時に起動します。
  • 本番時：Viteは同じく効率的なバンドラーであるRollupを使い、高度に最適化された静的アセットを生成します。

この方式は開発体験を一変させ、電光石火の起動とミリ秒単位のホット更新を実現します。

3. 実践的な移行手順

既存のWebpackプロジェクトをViteへ移行する場合、通常は次の手順を行います。

a. 依存関係をインストールし、設定ファイルを作成する

まずViteをインストールします。

pnpm add -D vite @vitejs/plugin-react # 或 @vitejs/plugin-vue

次にプロジェクトのルートにvite.config.jsを作成します。

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

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

b. index.htmlを移動する

Webpackでは通常、index.htmlをpublicディレクトリに置き、バンドル済みのJSを自動挿入します。Viteはindex.htmlをアプリケーションのエントリーポイントとして扱います。これをプロジェクトのルートへ移し、スクリプト参照を手動で追加する必要があります。

<!-- /index.html -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

c. Webpackプラグインを置き換える

WebpackのLoadersとPluginsに対応するViteプラグインを探す必要があります。コミュニティのエコシステムは豊富で、ほとんどの要件に解決策が見つかります。

WebpackVite
babel-loader@vitejs/plugin-react（Babel内蔵）
vue-loader@vitejs/plugin-vue
file-loaderViteに内蔵
webpack-dev-serverViteに開発サーバーを内蔵

d. 環境変数を扱う

Webpackではprocess.env.NODE_ENVを使うことに慣れています。Viteではimport.meta.envを通して環境変数へアクセスする必要があります。たとえばimport.meta.env.VITE_API_URLです。

e. パスエイリアスを設定する

vite.config.jsでのパスエイリアス設定は非常に簡単です。

import path from 'node:path'
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

4. 移行後の成果

Viteへ移行した後、最も直感的に感じるのは速さです。

  • 開発サーバーの起動時間は50秒から2秒に短縮されました。
  • ホット更新は平均3〜5秒から、ほとんど感じない数十ミリ秒に短縮されました。
  • 設定ファイル（vite.config.js）はwebpack.config.jsより大幅に簡素になりました。

結論

移行中にプロジェクト固有の設定問題へ対処する必要があるかもしれませんが、WebpackからViteへ移ることで開発体験は大きく向上します。まだ遅いビルド処理に耐えているなら、今こそViteを採用する絶好のタイミングです。

Vite Webpack ビルドツール 移行