Zenn
Open5

Viteについて全体的に調べる

ふなふなパラダイスふなふなパラダイス

Viteとは

  • ノーバンドルツールと呼ばれているがバンドルはする
  • webpack
    • ビルド時に全ての依存関係を解消した後、バンドルを行う
  • vite
    • 開発時に、全てをバンドルするのではなく、各ファイルをESModulesとして扱い、ブラウザが必要とするコードの部分だけをリクエストし、その部分だけを読み込む
ふなふなパラダイスふなふなパラダイス

ESModulesとは

  • ECMAScript 6で導入された公式なモジュールシステムの標準
  • 特徴
    • importとexport
      • 異なるJavaScriptファイル（モジュール）間で関数、オブジェクト、クラスなどを共有できる
    • スコープの管理
      • モジュール内で定義された変数、関数、クラスは他のモジュールから直接アクセスできない
    • 静的構造
      • インポートとエクスポートをファイルのトップレベルで行うことで、ビルドツールやランタイムがモジュールの依存関係を前もって解析しやすくなる
    • ブラウザとNode.jsのサポート
ふなふなパラダイスふなふなパラダイス

Viteとは2

  • 従来

    • 実行されるとプロジェクト内の全てのファイル(依存関係の解決も含め)をコンパイルしバンドルしたソースコードを生成

  • 問題点

    • フロント開発時における更新
    • ソースコード更新の度に、全てのバンドルを再構築しウェブページをリロードしなければならない

  • vite

    • ES modulesのimportにより、必要な時に必要なファイルだけをコンパイルしてブラウザに送るような仕組み

  • Vite開発サーバーがHTTPリクエストを受け取ると、そのリクエストに応じてまだ読み込まれていないモジュールを動的にロードする
  • 依存関係の解決
    • esbuildを使用して、pre-bundleというプロセスで事前バンドル生成を行う
    • esbuildはGoで開発されているのでめっちゃ早い
    • 依存関係のみ事前にバンドルしている
    • Viteは開発時には必要最小限のプリバンドリングを行い、ブラウザが要求する際にモジュールを動的に提供することで高速な開発体験を提供している
  • pre-bundle
    • CommonJSとUMDをNative ESMに変換

https://qiita.com/yoshii0110/items/6277626b0f558818da08