Posted inDevelopment

さらばWebpack：Viteでプロジェクトのビルド速度を10倍に「ハック」した方法

Development tutorial - IT technology blog
Development tutorial - IT technology blog

「Waiting for build…」という悪夢

もしあなたが大規模なReactやVueプロジェクトに携わっているなら、Ctrl + Sを押した後にローディングが回るのを眺める時間は馴染み深いものでしょう。UIの小さな変更を確認するだけで10秒も待たされることもあります。開発のリズムが途切れるのは、非常にストレスが溜まるものです。

なぜWebpackは遅いのでしょうか？その原因は「バンドルベース」の仕組みにあります。Webpackは、すべてのファイルをスキャンして依存関係グラフを構築し、それらを1つのバンドルファイルにまとめてから実行します。コードベースが大きくなるほど、Webpackは重くなります。以前、1,500以上のモジュールがあるプロジェクトを管理していましたが、開発サーバーの起動に2分近くかかっていました。しかしViteに移行したところ、その時間は1.5秒足らずに短縮されました。チームメンバーも、サーバーを再起動するたびにコーヒーを淹れに行く必要がなくなったのです。

Vite（フランス語で「速い」という意味）は、2つの強力な武器でこの問題を解決します：

  • Native ESM: Viteは開発環境でコードをバンドルしません。ブラウザがES Modulesを通じて必要なファイルだけを要求し、Viteはそれに応答するだけです。
  • Esbuild: Go言語で書かれたビルドツールです。従来のJavaScript製ツールよりも10倍から100倍高速です。

一瞬でプロジェクトを作成する

始めるにはNode.jsのバージョン18以上が必要です。複雑な手順は不要です。ターミナルを開いて以下のコマンドを入力してください：

npm create vite@latest my-awesome-app

Viteはどのフレームワークを使用するか尋ねてきます。create-react-appのように不要なライブラリが大量にインストールされることはなく、Viteは非常に軽量です。アプリの実行に本当に必要なものだけを提供します。

React + TypeScriptの構成を選択した場合、ディレクトリ構造は以下のようになります：

my-awesome-app/
├── src/
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── package.json
└── vite.config.ts

興味深いのは、index.htmlがルートディレクトリにあることです。Viteはこれをエントリーポイント（entry point）として扱い、<script type="module">タグを解析します。このアプローチにより、コードの読み込みがほぼ一瞬で行われます。

それでは、インストールして実行してみましょう：

cd my-awesome-app
npm install
npm run dev

実プロジェクト向けの設定カスタマイズ

デフォルト設定でも十分優れていますが、実際のプロジェクトではvite.config.tsにいくつかのカスタマイズを加えることで、より快適に作業できます。

1. エイリアス（パスの短縮）の設定

import Header from '../../../components/Header'のような乱雑なインポートはやめましょう。エイリアスを使ってスッキリさせます。

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // '@' を src ディレクトリに割り当てる
      '@': path.resolve(__dirname, './src'),
    },
  },
})

2. 環境変数のセキュリティ

Viteはprocess.envの代わりにimport.meta.envを使用します。重要なルールとして、VITE_で始まる変数のみがクライアント側に公開されます。

# .env
VITE_API_URL=https://api.itfromzero.com
SECRET_KEY=123456 # この変数はサーバー側で秘匿されます

コード内で使用する場合は、import.meta.env.VITE_API_URLと記述するだけで完了です。

3. プロキシによるCORS対策

ローカル開発中にAPIを呼び出す際のCORSエラーはよくある悩みです。Viteでは、ブラウザを騙すためのプロキシを非常に簡単に設定できます：

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

バンドルサイズの管理

デプロイ前に、ビルドファイルのサイズを確認することは必須です。Viteは本番用ビルドにRollupを使用しており、強力なツリーシェイキング（tree-shaking）によって不要なコードを排除します。

私はよくrollup-plugin-visualizerを使って各ライブラリの容量を視覚化しています。これにより、Moment.jsやフルセットのLodashといった「重い侵入者」を特定できます。

npm install -D rollup-plugin-visualizer

その後、設定ファイルにプラグインを追加します：

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  // visualizer を追加して解析結果を自動で開く
  plugins: [react(), visualizer({ open: true })],
})

npm run buildを実行すると、視覚的なチャートが表示されます。どこを最適化すべきか一目で分かります。

デプロイのアドバイス

VercelやNetlifyにデプロイする場合、ビルドコマンドはvite buildのままで、成果物はdist/ディレクトリに出力されます。大きなメリットとして、ViteはCSSをJavaScriptのチャンクごとに自動的に分割します。これにより、ブラウザが最初に巨大なCSSファイルを読み込む必要がなくなり、ページの読み込みが速くなります。

WebpackからViteへの移行は、単なるツールの変更ではありません。それは日々の開発体験をアップグレードすることです。もしあなたのプロジェクトが重く感じられるなら、今すぐ移行を試してみてください。その圧倒的なスピードに驚くはずです。

Share:
Tags: