Open4日前にコメント追加14

vite

kzk4043

viteについてメモ

kzk4043

早くて設定が簡単なWebpack、くらいの認識でしかないので勉強する

kzk4043

viteとはなにか

Vite＝フランス語で「素早い」という意味の単語
現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツール。下記2つの主要部分で構成される

非常に高速な Hot Module Replacement (HMR) など、ネイティブ ES モジュールを利用した豊富な機能拡張を提供する開発サーバー
Rollup でコードをバンドルするビルドコマンド。プロダクション用に高度に最適化された静的アセットを出力するように事前に設定

推し

瞬時にスタートするサーバ
超高速なHMR
豊富な機能
最適化されたビルド
ユニバーサルなプラグイン
完全に型定義がされているAPI

kzk4043

gpt

フロントエンド開発のためのビルドツールおよび開発サーバー
Vue.jsのクリエーターであるEvan Youによって開発

主な特徴

高速な開発サーバー
最適化されたビルドプロセス
プラグインシステムフ
レームワークに依存しない:

kzk4043

stackblitzテンプレが充実してるらしい

kzk4043

 ちょっと試す$ npm create vite@latest
対応FW多い→Angular足されてた＠2024/11/10
初期設定こんな感じ

kzk4043

テンプレもいろいろあるっぽい

サポートされている各テンプレートの詳細は create-vite を参照してください: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.
他のツールを含んでいたり、別のフレームワークを対象としている、コミュニティーが管理しているテンプレートについては Awesome Vite をチェックしてみてください。

公式＋コミュニティのテンプレ

kzk4043

Vite を使う理由

ES モジュールがブラウザーで利用できるようになるまで、開発者はモジュール化された JavaScript を生成するネイティブの仕組みを持っていませんでした。これは、私たちが「バンドル」のコンセプトに慣れ親しんでいる理由でもあります: すなわち、ブラウザーで実行可能なようにソースモジュールをクロール、処理し、連結するツールを使用しています。

開発サーバーを起動するのにやたらと長く待つこともあります（数分かかることさえ！）。また、Hot Module Replacement（HMR）を利用していても、ファイル編集がブラウザーに反映されるまで数秒かかることもあります。フィードバックの遅さが継続することは、開発者の生産性や幸福度に大きな影響を与える可能性

遅いサーバー起動

開発サーバーがコールドスタートするとき、バンドラーベースのビルドセットアップは、アプリケーション全体を提供する前に、アプリケーション全体を隅々までクロールしてビルドする必要があります。
Vite はまず最初にアプリケーションのモジュールを 2 つのカテゴリーに分割することで、開発サーバーの起動時間を改善します: 依存関係とソースコードです。

依存関係
- Vite は、esbuild を使用して依存関係の事前バンドルを行う
- esbuild は Go 言語によって開発されており、依存関係の事前バンドルは、JavaScript ベースよりも 10 倍から 100 倍高速
ソースコード
- 変換を必要とするプレーンな JavaScript ではないものが含まれることがよくあり、頻繁に編集（例: JSX、CSS や Vue/Svelte コンポーネント）
- 全てのソースコードを同時に読み込む必要はない（例: ルーティングによるコード分割）
- Vite は、ネイティブ ESM を行使してソースコードを提供
- Vite はブラウザーのリクエストに応じて、ソースコードを変換し提供するのみ

今までのバンドラは最初に全部見てバンドルしなきゃいけなかったから遅かったけど、Viteはルートベースでオンリクエストでバンドル？するから早いよってこと？いや、そもそもバンドルしないよって話…？わからん

遅い更新速度

Vite では、HMR をネイティブ ESM 上で行います。ファイルが編集されたとき、Vite は編集されたモジュールと最も近い HMR バウンダリ間のつながりを正確に無効化することで（大抵はモジュール本体だけです）、HMR による更新はアプリケーションのサイズに関係なく一貫して高速で実行されます。

ここでも、ブラウザーにはもっと働いてもらいます

結構ブラウザに処理を寄せるというかデフォルトの挙動でできることはやろうみたいな思想？

kzk4043

プロダクションではバンドルする理由

プロダクションではバンドルするのか…Devではとにかく開発体験を上げるために高速で更新されるようにしておいて、Prodではユーザ体験向上を目指す、みたいな感じか。Dev/Prodで挙動の違いが出てバグるみたいのないんかな…ゆーて昔Next.js/webpackでDev/Prodで挙動が違うバグあったな。