🔮

ViteとWebpack

に公開
webpack
Vite
tech

ViteやWebpackとは？

ViteやWebpackは、フロントエンド開発においてコードを効率的に管理・配信するためのツールです。具体的には、モジュールバンドラーまたはビルドツールと呼ばれます。

モジュールバンドラーとビルドツールの違い

  • モジュールバンドラー: プロジェクト内の依存関係を解決し、コードを1つまたは複数のファイルにまとめるツール（例: Webpack）。
  • ビルドツール: モジュールバンドリングに加えて、開発サーバーの提供や高度な最適化機能を持つツール（例: Vite）。

モジュールバンドラーとしての役割

モジュールバンドラーは、プロジェクト内の複数のファイルや依存関係をまとめ、効率的に配信できる形に変換します。これにより以下のメリットがあります：

  • 依存関係の解決: 内部モジュールや外部ライブラリを統合。
  • 配信効率化: リクエスト数を削減して読み込み速度を向上。

実例

例えば、以下のコード構造を考えます：

main.js -> header.js, footer.js, utils.jsをインポート
header.js -> lodashを利用
footer.js -> date-fnsを利用

Webpackを使うと、これらが1つの bundle.js に統合され、効率的にブラウザで動作します。

Webpack設定例

// webpack.config.js
module.exports = {
  entry: './src/index.js', // メインファイル
  output: {
    filename: 'bundle.js', // 出力ファイル名
    path: __dirname + '/dist', // 出力先
  },
};

Viteについて

Viteは、モダンなウェブ開発を驚くほど速くするビルドツールです。VueやReactといったモダンフレームワークと非常に相性が良い設計になっています。

Viteが速い理由

  1. ESモジュール:ESMの活用
    ブラウザが直接モジュールを解釈するため、初回のバンドル処理が不要です。
  2. ホットモジュールリプレース（HMR）
    コードの変更が瞬時に反映されるため、開発体験が向上します。

コマンド例

npm create vite@latest my-project
cd my-project
npm install
npm run dev

Webpackについて

Webpackは、長年にわたってフロントエンド開発を支えてきた信頼性の高いモジュールバンドラーです。

Webpackの特徴

  1. 依存関係を統合
    HTML、CSS、JavaScriptを1つのファイルまたは分割された形で統合します。
  2. 幅広いブラウザ対応
    Babelを使って古いブラウザ向けにコードを変換します。

ミニファイ（Minify）の役割

ミニファイは、バンドルされたコードをさらに最適化するプロセスです：

  • 不要な空白やコメントを削除。
  • 変数名を短縮してコードサイズを削減。

Before/Afterの例

// Before Minify
function addNumbers(a, b) {
  return a + b;
}

// After Minify
function a(c,d){return c+d}

これにより、読み込み速度が向上し、ユーザー体験が改善されます。

ViteとWebpackの違い

項目 Vite Webpack
起動速度 とても速い（ESモジュールを活用） 初回ビルドが遅いことがある
更新速度 即時反映（ホットモジュールリプレース） 再ビルドに時間がかかる場合も
学びやすさ 設定不要で直感的 設定ファイルが複雑になることがある
プラグイン・拡張性 少ないがモダンで簡潔 豊富なプラグインが利用可能
対応ブラウザ モダンブラウザ向け 古いブラウザにも対応

どちらを選ぶべきか？

  • 小規模プロジェクトやモダンブラウザのみを対象とする場合: Vite
  • 大規模プロジェクトや古いブラウザ対応が必要な場合: Webpack

参考

https://nisshingeppo.com/ai/whats-build/

Discussion