ツノ
 @2nofa11 Vite 完全に理解した(してない)
 ~その1 ただのバンドラーではない!?~ 

自己紹介 

ツノ I BtoB SaaSのフロントエンドエンジニr I 銭湯とサウナを愛する208 I 「〇〇完全に理解した」Talkは3回目 　 　 過去のL" 書籍「プログラマー脳」を完全に理解しi 「世界一流のエンジニアの思考法」を完全に理解しi I コメント拾いつつ発表できるようになりたい 自己紹介 

LT内容 

Viteに詳しくなりたい！ ■やりたいこと Viteについて勉強をしたのでアウトプット ■⁩予防線 以下の点を念頭に聞いてくださw I 諸事情で時間を捻出できなかっV I Viteは奥が深すぎる ■なので スコープを思いっきり狭めます！ さわらつき(@sawaratsuki1004)さん作のロゴ 

方針 

LT内容 本発表のゴール ■対象‚ u フロントエンド初学‚ u フロントエンド開発ツール(Vite,Webpack)をなんとなく 使っている人(主に私) ■⁩目h u Viteのどこがすごいのかを語れるよう2 u 他のバンドラー(Webpack)と比較を中心2 u 今後予定の「その2」に繋げらるように 

01 Viteとは 

Vite 完全に理解した(してない) Viteとは なるほど、わからん 

Vite 完全に理解した(してない) Viteの登場 ■Viteとは(公式より)
 　 ・読み方は「ヴィート」=フランス語で「素早い」 　 ・現代の Web プロジェクトのために、より速く無駄のな い開発体験を提供することを目的としたビルドツールです ■特4 e 高速な開発サーバ‡ e バンドラーの機能だけではない ■⁩ Webpackと何が違うのか™ e Webpackは「バンドラー e Viteは「ビルドツール(バンドラー+α)」 

Vite 完全に理解した(してない) そもそもフロントエンド開発ツールとはなんなのか？ ■フロントエンド開発ツール=バンドラーと解釈した場合 ・ ■バンドラーとは ・以下コマンドを実行した時に動いていたりする(例:Webpack) 　 ・開発時：`npm run dev` 　 ・ビルド時：`npm run build` ■⁩ Webpackの功績 ・現在も広く使われている ・開発環境が良くなった
 　 →ただ、開発時は時間がかかったり改善の余地がある Webpack、esbuild、Roleup 

02 Viteの特徴を深掘り 

Vite 完全に理解した(してない) Viteの特徴は「素早い」 ■従来のフロントエンド開発ツール( )はs E 開発時、ビルド時も常にバンドルしてい… E `npm run dev`→修正の反映ごとにバンドル→時間長い ■Viteはs E 開発時とビルド時に処理が大きく異な… E `npm run dev`の時はGo製の で事前バンドル
 その他の工夫（例：ブラウザのESM...）を利用
 →高速に!!3 E `npm run build`の時は でバンドルする
 →ビルド時は柔軟に!!! Webpack esbuild Roleup 

Vite 完全に理解した(してない) 開発時の特徴 ■事前バンドルによるバンドルの最小w v jsライブラリ(例:lodash...)は初回のみ読み込e v ソースコー˜ v 右図が公式サイトに載っててわかりやすp v Webpackは修正があるたび全部インポーv v ブラウザで読み込まれた場所を動的インポート ■処理の一部をブラウザ側に委譲す€ v キャッシュを最大限利用
 →変更があるファイルのみ検知して入れ替え 

Vite 完全に理解した(してない) ビルド時の特徴 ■多機能バンドラー を利– k ViteのプラグインはほぼほぼRoleupが提供しているも„ k との相違T k 設定がシンプn k ビルド後の不要なコードの除去が優れてい‘ k 後発のためESMを主要サポートとする ■Viteにおける の利用方1 k 後述する`vite.config.js`越しに設定を変更する Roleup Webpack Roleup 

03 Viteで押さえておくべきファイル 

Vite 完全に理解した(してない) index.html ■概X h エントリーポインG h 最初に読み込まれる ■具体的な役ƒ h 必要なJavaScript（main.ts）やCSSファイル、その他 のリソースへのリンクを含める 

Vite 完全に理解した(してない) main.ts ■概u X srcフォルダ内の直下位置 ■具体的な役U X ライブラリ（例えばReactやVueなど）をインポート し、アプリケーションを初期化 

Vite 完全に理解した(してない) vite.config.js ■概U s Viteの設定をカスタマイズするためのファイル ■具体的な役E s カスタマイv s プラグインの使H s ビルドオプショI s サーバー設„ s webpack.config.jsみたいなイメージ 

04 Viteを触ってみよう 

Vite 完全に理解した(してない) 主要ファイルの説明 ■確認するこG A index.htmE A main.t2 A vite.config.ts 

Vite 完全に理解した(してない) 開発時(デモ) ■確認するこa 3 ブラウザ側でモジュールが動的に置き換わるこC 3 typescriptファイルが同名で2種類存在していること 

Vite 完全に理解した(してない) ビルド時(デモ) ■確認するこ8 A ビルドコマンドが実行された時、バンドルされていること 

EOL