Vite完全に理解した その１

Transcript

1. ツノ
 @2nofa11 Vite 完全に理解した(してない)
 ~その1 ただのバンドラーではない!?~
2. 自己紹介
3. ツノ I BtoB SaaSのフロントエンドエンジニr I 銭湯とサウナを愛する208 I 「〇〇完全に理解した」Talkは3回目 　 　 過去のL" 書籍「プログラマー脳」を完全に理解しi 「世界一流のエンジニアの思考法」を完全に理解しi I コメント拾いつつ発表できるようになりたい 自己紹介
4. LT内容
5. Viteに詳しくなりたい！ ▪やりたいこと Viteについて勉強をしたのでアウトプット ▪⁩予防線 以下の点を念頭に聞いてくださw I 諸事情で時間を捻出できなかっV I Viteは奥が深すぎる ▪なので スコープを思いっきり狭めます！ さわらつき(@sawaratsuki1004)さん作のロゴ
6. 方針
7. LT内容 本発表のゴール ▪対象‚ u フロントエンド初学‚ u フロントエンド開発ツール(Vite,Webpack)をなんとなく 使っている人(主に私) ▪⁩目h u Viteのどこがすごいのかを語れるよう2 u 他のバンドラー(Webpack)と比較を中心2 u 今後予定の「その2」に繋げらるように
8. 01 Viteとは
9. Vite 完全に理解した(してない) Viteとは なるほど、わからん
10. Vite 完全に理解した(してない) Viteの登場 ▪Viteとは(公式より)
 　 ・読み方は「ヴィート」=フランス語で「素早い」 　 ・現代の Web プロジェクトのために、より速く無駄のな い開発体験を提供することを目的としたビルドツールです ▪特4 e 高速な開発サーバ‡ e バンドラーの機能だけではない ▪⁩ Webpackと何が違うのか™ e Webpackは「バンドラー e Viteは「ビルドツール(バンドラー+α)」
11. Vite 完全に理解した(してない) そもそもフロントエンド開発ツールとはなんなのか？ ▪フロントエンド開発ツール=バンドラーと解釈した場合 ・ ▪バンドラーとは ・以下コマンドを実行した時に動いていたりする(例:Webpack) 　 ・開発時：`npm run dev` 　 ・ビルド時：`npm run build` ▪⁩ Webpackの功績 ・現在も広く使われている ・開発環境が良くなった
 　 →ただ、開発時は時間がかかったり改善の余地がある Webpack、esbuild、Roleup
12. 02 Viteの特徴を深掘り
13. 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
14. Vite 完全に理解した(してない) 開発時の特徴 ▪事前バンドルによるバンドルの最小w v jsライブラリ(例:lodash...)は初回のみ読み込e v ソースコー˜ v 右図が公式サイトに載っててわかりやすp v Webpackは修正があるたび全部インポーv v ブラウザで読み込まれた場所を動的インポート ▪処理の一部をブラウザ側に委譲す€ v キャッシュを最大限利用
 →変更があるファイルのみ検知して入れ替え
15. Vite 完全に理解した(してない) ビルド時の特徴 ▪多機能バンドラー を利– k ViteのプラグインはほぼほぼRoleupが提供しているも„ k との相違T k 設定がシンプn k ビルド後の不要なコードの除去が優れてい‘ k 後発のためESMを主要サポートとする ▪Viteにおける の利用方1 k 後述する`vite.config.js`越しに設定を変更する Roleup Webpack Roleup
16. 03 Viteで押さえておくべきファイル
17. Vite 完全に理解した(してない) index.html ▪概X h エントリーポインG h 最初に読み込まれる ▪具体的な役ƒ h 必要なJavaScript（main.ts）やCSSファイル、その他 のリソースへのリンクを含める
18. Vite 完全に理解した(してない) main.ts ▪概u X srcフォルダ内の直下位置 ▪具体的な役U X ライブラリ（例えばReactやVueなど）をインポート し、アプリケーションを初期化
19. Vite 完全に理解した(してない) vite.config.js ▪概U s Viteの設定をカスタマイズするためのファイル ▪具体的な役E s カスタマイv s プラグインの使H s ビルドオプショI s サーバー設„ s webpack.config.jsみたいなイメージ
20. 04 Viteを触ってみよう
21. Vite 完全に理解した(してない) 主要ファイルの説明 ▪確認するこG A index.htmE A main.t2 A vite.config.ts
22. Vite 完全に理解した(してない) 開発時(デモ) ▪確認するこa 3 ブラウザ側でモジュールが動的に置き換わるこC 3 typescriptファイルが同名で2種類存在していること
23. Vite 完全に理解した(してない) ビルド時(デモ) ▪確認するこ8 A ビルドコマンドが実行された時、バンドルされていること
24. EOL