【入門】Viteの仕組み。なぜ高速？フロントエンド歴史。

はじめてviteを使った時に速すぎて驚いた。

チャンネル登録者が12.8万人を超えました。改めてありがとうございます。しかしまだ未登録の方が77%おられます。ぜひチャンネル登録をお願い致します！

メンバーシップの登録はこちら。
https://www.youtube.com/channel/UCtiDTuG40ZOarubtFm1fbzg/join

====
目次
====
0:00 イントロ
0:36 第1章 ブラウザに届けるまで
1:32 第2章 全部まとめてから起動する
2:15 第3章 頼まれた分だけ変換する
2:56 第4章 Viteの歴史
6:33 第5章 開発サーバーの中身
8:11 第6章 依存の事前バンドル
9:10 第7章 HMR
10:44 第8章 プラグイン
11:37 第9章 本番ビルドとRolldown
12:54 第10章 これからのVite
13:58 まとめ

【PR】ITエンジニア特化の転職エージェント「テックゴー」
https://h.accesstrade.net/sp/cc?rk=0100q5og00osn8

====
note
====
海外ソフトウェアエンジニアリング事例を発信
https://note.com/naoya_tech

====
SNS
====

●X
https://x.com/naoyashiga

●Instagram
https://www.instagram.com/naoya_tech/

●Threads
https://www.threads.com/@naoya_tech

●直也テック TikTok
https://www.tiktok.com/@coding_youtuber


====
低レイヤー自作を行う学習教材
====
バックエンドや要素技術を自作して学びたい方はCodeCraftersがおすすめです。


👇このリンクから登録すると40%OFFになります。
https://app.codecrafters.io/join?via=naoyashiga

------------

●お仕事のご依頼はこちらから
https://www.naoya-tech.com


●BGM素材
BGMer
http://bgmer.net

■この動画で分かること
・ブラウザに届ける前に、TypeScriptの変換やパッケージ名の解決がいる理由
・webpackのようなバンドラーの開発サーバーが、アプリ全体をまとめてから起動する理由
・ブラウザのES Modulesを使い、頼まれたファイルだけをその場で変換するViteの開発サーバー
・226行だった2020年4月の最初のコミットと、0.xから8までの変遷
・最初の試作が書かれた夜、Snowpackとの競争、SvelteKitの乗り換え、Vitestとvite-ecosystem-ciが生まれた経緯
・依存パッケージと自分のコードを分けて扱う考え方と、依存の事前バンドル（node_modules/.vite）
・ミドルウェアの並びと、resolveId → load → transform の3段階、import文の書き換え
・自分のコードはETagと304、依存は1年のキャッシュ（immutable）という使い分け
・HMRで、モジュールグラフをたどって一番近い境界を探し、WebSocketでブラウザに知らせる流れ
・開発と本番で同じフックが動くプラグインの仕組みと、Rollupから受け継いだ形
・本番でバンドルする理由と、Vite 8でバンドラーをRolldownに1本化した経緯
・開発中もまとめるBundled Dev Mode（実験的）とEnvironment API

#Vite #フロントエンド #JavaScript #TypeScript #React #webpack #esbuild #Rollup #Rolldown #Oxc #HMR #ESModules #プログラミング