Featured image of post Viteでビルドを速くするための基本設定Featured image of post Viteでビルドを速くするための基本設定
ソフトウェア

Viteでビルドを速くするための基本設定

Viteでビルドを速くするための基本設定を解説。開発体験を良くする考え方をまとめます。

  1. ホーム
  2. Softwares
  3. Viteでビルドを速くするための基本設定

Viteでビルドを速くするための基本設定

Viteは、開発サーバーの起動が速いことで知られるフロントエンドビルドツールです。本記事では、Viteの高速さを支える仕組みを簡単に解説した上で、さらにビルドパフォーマンスを引き出すための設定テクニックを紹介します。

Viteが速い理由

Viteが従来のWebpackなどと決定的に違うのは、開発時と本番ビルドで異なる戦略を取っている点です。

開発時：ES Modules をそのまま配信

開発サーバーでは、バンドルを行いません。ブラウザがネイティブにES Modules（import / export）を解釈する仕組みを利用して、リクエストがあったファイルだけを即座に変換して配信します。これにより、プロジェクトが大きくなっても開発サーバーの起動が一瞬で完了します。

本番ビルド：Rollup による最適化

本番用のビルドでは、Rollup を内部で使用してツリーシェイキングやコード分割を行い、効率的なバンドルを生成します。設定ファイルは vite.config.ts 1つで完結します。

ビルドパフォーマンスを高める設定

依存関係のプリバンドル

Viteは node_modules 内の依存関係を事前にバンドル（プリバンドル）します。初回の npm run dev 時に実行され、以降はキャッシュが使われるため2回目以降の起動が高速です。

特定の依存関係を強制的にプリバンドルから除外したい場合は、optimizeDeps.exclude を使います。

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    exclude: ['large-dependency']
  }
})

manualChunks でバンドルを最適化

本番ビルドの出力サイズを最適化するには、build.rollupOptions.output.manualChunks を設定します。ライブラリごとにチャンクを分割することで、ブラウザのキャッシュ効率が上がります。

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          ui: ['@mui/material', '@emotion/react']
        }
      }
    }
  }
})

この設定により、React 系のライブラリは vendor チャンク、MUI 系は ui チャンクに分割され、アプリコードだけを更新した場合にライブラリのキャッシュが維持されます。

パスエイリアスの設定

@/components/Button のようなパスエイリアスを設定すると、インポート文が短くなり可読性が向上します。

import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  // 型定義のための tsconfig 設定も忘れずに
})

tsconfig.json にも同じエイリアスを追記しておきましょう。

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

環境変数の扱い

Vite では import.meta.env.VITE_* で環境変数にアクセスします。.env ファイルをプロジェクトルートに配置すれば、開発環境と本番環境で異なる値を簡単に切り替えられます。

# .env
VITE_API_URL=https://api.example.com

# .env.development
VITE_API_URL=http://localhost:3000

環境変数はビルド時に静的に埋め込まれるため、実行時のオーバーヘッドはありません。

本番ビルドの結果を確認する

最適化の効果を確認するには、以下のコマンドでバンドルサイズを可視化するとよいでしょう。

npm add -D vite-bundle-analyzer

vite.config.ts にプラグインを追加すれば、ビルド後にどのモジュールがどれだけの容量を占めているかが一目でわかります。

まとめ

Vite はデフォルトでも十分に高速ですが、manualChunks の分割やパスエイリアスの設定などの基本チューニングを加えることで、より効率的な開発・本番運用が可能になります。まずは small なプロジェクトで設定を試しながら、自分にとって最適な構成を見つけてみてください。

©2022 - 2026 かいせつくん