Open5
Viteについて全体的に調べる
![ふなふなパラダイス](https://res.cloudinary.com/zenn/image/fetch/s--mp8v1xXV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4446cc832d.jpeg)
Viteとは
- ノーバンドルツールと呼ばれているがバンドルはする
- webpack
- ビルド時に全ての依存関係を解消した後、バンドルを行う
- vite
- 開発時に、全てをバンドルするのではなく、各ファイルをESModulesとして扱い、ブラウザが必要とするコードの部分だけをリクエストし、その部分だけを読み込む
![ふなふなパラダイス](https://res.cloudinary.com/zenn/image/fetch/s--mp8v1xXV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4446cc832d.jpeg)
ESModulesとは
- ECMAScript 6で導入された公式なモジュールシステムの標準
- 特徴
-
import
とexport
- 異なるJavaScriptファイル(モジュール)間で関数、オブジェクト、クラスなどを共有できる
- スコープの管理
- モジュール内で定義された変数、関数、クラスは他のモジュールから直接アクセスできない
- 静的構造
- インポートとエクスポートをファイルのトップレベルで行うことで、ビルドツールやランタイムがモジュールの依存関係を前もって解析しやすくなる
- ブラウザとNode.jsのサポート
-
![ふなふなパラダイス](https://res.cloudinary.com/zenn/image/fetch/s--mp8v1xXV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4446cc832d.jpeg)
Viteとは2
-
従来
- 実行されるとプロジェクト内の全てのファイル(依存関係の解決も含め)をコンパイルしバンドルしたソースコードを生成
- 実行されるとプロジェクト内の全てのファイル(依存関係の解決も含め)をコンパイルしバンドルしたソースコードを生成
-
問題点
- フロント開発時における更新
- ソースコード更新の度に、全てのバンドルを再構築しウェブページをリロードしなければならない
-
vite
- ES modulesのimportにより、必要な時に必要なファイルだけをコンパイルしてブラウザに送るような仕組み
- Vite開発サーバーがHTTPリクエストを受け取ると、そのリクエストに応じてまだ読み込まれていないモジュールを動的にロードする
- 依存関係の解決
- esbuildを使用して、pre-bundleというプロセスで事前バンドル生成を行う
- esbuildはGoで開発されているのでめっちゃ早い
- 依存関係のみ事前にバンドルしている
- Viteは開発時には必要最小限のプリバンドリングを行い、ブラウザが要求する際にモジュールを動的に提供することで高速な開発体験を提供している
- pre-bundle
- CommonJSとUMDをNative ESMに変換
![ふなふなパラダイス](https://res.cloudinary.com/zenn/image/fetch/s--mp8v1xXV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/4446cc832d.jpeg)
Viteはどのタイミングで何をバンドルしているか
- 開発時(Development)
- Viteは開発サーバーの起動時に、node_modules内にあるサードパーティの依存関係をプリバンドル
- ビルド時(Production)
- Rollupを使用してアプリケーション全体をバンドルし、最適化する