フロントエンドのビルドツール選びでもっとも話題になるのがViteとWebpackです。Webpackが長年標準だった時代から、Viteが急速に主役の座を奪いつつあります。本記事では、両者の違いと用途別の選び方を整理します。
ViteとWebpackの基本
- Webpack：すべてのモジュールをバンドルしてから配信。長く業界標準
- Vite：開発時はESM（ネイティブimport）で配信、本番はesbuild/rollupでバンドル
開発体験の違い
Viteは「ネイティブESMで必要なモジュールだけブラウザが読み込む」アプローチで起動が圧倒的に速く、HMRも編集ファイルだけが対象になります。Webpackは規模が大きくなるほどビルド時間が伸びがちで、開発サーバー起動に数十秒かかることも珍しくありません。
項目別比較
- 開発サーバー起動：Viteが数倍～10倍速い
- HMR：Viteは差分のみ。Webpackは依存解析が必要
- 設定の複雑度：Viteは最小・デフォルト寄り。Webpackは細かいチューニングが必要
- エコシステム：Webpackが歴史長く、特殊ローダーが豊富
- 本番ビルド：Vite=rollup、Webpack独自。共に同レベルに最適化可能
Vite設定の例
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: { port: 3000 },
});Webpack設定の例
// webpack.config.js
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{ test: /\.tsx?$/, use: 'ts-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
resolve: { extensions: ['.ts', '.tsx', '.js'] }
};選び方の指針
- 新規プロジェクト：Vite一択（ほぼすべてのフレームワークが標準採用）
- 既存Webpackプロジェクト：移行はメリット大きいが、特殊ローダー依存があるか確認
- 大規模・特殊要件：細かい制御が必要ならWebpackがまだ強い場面もある
その他の選択肢
- Turbopack：Next.js公式の次世代バンドラ（Rust製）
- Rspack：Webpack互換APIを持つRust製の高速代替
- esbuild：Go製の超高速バンドラ（Viteも内部利用）
まとめ
Viteは「開発体験の良さ」でWebpackを大きく上回り、現代の標準になりつつあります。新規はVite、既存はメリット次第で移行が現実的な指針です。Webpack資産の活用を残したいならRspackも有力な選択肢になります。
