Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vite完全に理解した その1
Search
ツノ
April 30, 2024
1
160
Vite完全に理解した その1
ツノ
April 30, 2024
Tweet
Share
More Decks by ツノ
See All by ツノ
エンジニア達の_完全に理解した_-コードでの契約ってなんだ_.pdf
2nofa11
1
91
年末年始に「chibivue」で Vueヂカラをつけた
2nofa11
0
250
「世界一流のエンジニアの思考法」 を完全に理解した
2nofa11
1
170
書籍「プログラマー脳」を完全に理解した
2nofa11
0
33
VuexからPinia移行に向けて
2nofa11
0
310
一か月半かけて、TypeScript本を写経した話
2nofa11
0
590
VueTestUtilbrのキホンの『キ』
2nofa11
0
130
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
100
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
Music & Morning Musume
bryan
46
6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Debugging Ruby Performance
tmm1
72
12k
Being A Developer After 40
akosma
84
590k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Raft: Consensus for Rubyists
vanstee
135
6.5k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
How to name files
jennybc
75
98k
RailsConf 2023
tenderlove
28
810
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Transcript
ツノ @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