これまでフロントエンドのビルドにはWebpackを使うことが多く、設定や運用にも慣れていました。
ただ、今回Webで遊べるReactアプリとして作るにあたり、初めてViteを使ってみました。
結論から言うと、特に詰まることなく最後まで作り切れた。
この「詰まらなかった」という体験自体が、Viteを評価する一番の理由でした。
本記事では、実際に使って感じたWebpackとの違いをまとめます。
デプロイ先は エックスサーバー（Xserver）での静的ファイル配置 です。
プロジェクトの要件
今回の制作物は以下の要件でした：
- CMSを使わず、静的ファイルとして配信
- ReactでUIを構築
- コンテンツはJSONデータと画像が中心
- エックスサーバーに配置予定
環境構築に時間をかけたくなかったため、Viteを採用しました。
体感で一番違ったのは「待ち時間」
Webpackと比べて、まず感じたのは以下です。
- 開発サーバーの起動が速い
- ファイル変更後の反映が速い（HMR：Hot Module Replacement）
- 以下の設定が不要
- Babel設定
- ローダーの設定
- JSX変換の設定
開発中に発生する「待ち」が減ると、思考が途切れにくくなります。
個人制作では、この差がそのまま作業効率に影響します。
WebpackとViteの仕組みの違い（ざっくり）
細かい内部構造は省きますが、押さえておくと安心な違いは以下です。
-
Webpack
すべてをバンドルしてから動かす設計。開発環境でもその影響を受けやすい。 -
Vite
開発時はネイティブESM（ES Modules）を活用し、ブラウザが必要なモジュールを直接読み込む。
本番ビルド時はRollupでバンドル・最適化を行う。
そのため、Viteは開発中の体感速度が軽いと感じやすいです。
今回使った環境
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"vite": "^5.0.0",
"@vitejs/plugin-react": "^4.2.0"
}
}今回使った vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
outDir: 'dist',
assetsDir: 'assets',
emptyOutDir: true
}
});ビルドコマンド：
npm run buildこの設定で困らなかった理由
Reactプラグイン
公式の @vitejs/plugin-react を入れるだけでJSX周りは問題なく動作。
Webpack時代のようなBabel設定は不要でした。
dist出力＋エックスサーバー配信
dist に出力されたファイルを、そのままエックスサーバーの公開ディレクトリに配置するだけ。
特別なサーバー設定は不要です。
FTPクライアント（FileZillaなど）で dist/ の中身を /public_html/ にアップロードすれば完了します。
assetsDirを指定
生成されたJSやCSS、画像が assets/ にまとまるため、構造が分かりやすい。
FTPアップロード時も迷いません。
emptyOutDir
ビルド前に出力先を空にするため、古いファイルが残らない。
上書きアップロード前提のエックスサーバー運用と相性が良いです。
baseを指定していない理由
今回はドメイン直下での配信を想定していたためbase は指定していません。
サブディレクトリ配信の場合は、
base: '/app/'を追加すれば対応可能です。
Webpackの方が向いているケースもある
- 既存案件でWebpack前提の構成がある
- 独自ローダーやプラグイン資産が多い
- ビルド要件が複雑
こうした場合は、無理にViteへ移行する必要はないと思います。
まとめ
- 小〜中規模のReact静的サイトなら、Viteは非常に快適
- エックスサーバー配信でも「distを置くだけ」で成立する
- 設定で悩む時間が少ないのは、個人制作では大きなメリット
今回の構成では、今後もViteを第一候補にするつもりです。