Closed27
Viteについて学ぶ
tkryVite
大昔に少しドキュメントを眺めた気がする。
SPAするときに楽ちん、みたいな認識。
esBuildとRollup使ってる、くらいしか知らない。
tkry
tkryVite は、ブラウザでのネイティブ ES モジュールの利用可能性や、ネイティブ言語にコンパイルされた JavaScript ツールの台頭など、エコシステムの新たな進歩を活用して、これらの問題に対処することを目指しています。
tkryバンドラで実現していた機能をブラウザに引き継ぐ、というのが肝っぽい気がする
- esmを使うことで、毎回全てのコードをバンドルする必要がない
- 毎回全てのコードをバンドルし直すと、コードベースの大きさに速度が依存する
- HTTP ヘッダーを活用してページ全体のリロードを高速化する
tkryRolldownが登場すると、esBuildとRollupの両方が置き換わる
tkryGetting Started
tkryFeatures
tkrybare module imports
ブラウザではimportのパスがライブラリ名、みたいな形に対応してないらしい
tkrytypescript
- 型チェックは行わず、トランスパイルのみ行う
- IDEやビルドプロセスで型チェックされる前提のため
- tsconfigを適切に設定する必要がありそう
tkryJSX/TSX
- サポートされてる、jsx->jsはesbuildがトランスパイルしてくれる
tkryCSS
- cssやcss modulesも対応
- pre-processor
- viteはesnextをターゲットにしてるので、ネストなんかは素のCSSを使った方がいいとのこと
- Lightning CSSも対応中
tkry静的アセット
- パブリックURLが返される
- （cssにもあったが）パスに特別なクエリをつけられる
tkryglobインポート
-
import.meta.globという特別な関数を使うと、複数モジュールのインポートをglobで記述できる - デフォルトはダイナミックインポートだけど設定できる
- これはVite独自機能
tkryweb assembly
- インポートできちゃうらしい
tkryあとはWeb workerとかCSPとか、ビルド最適化の話
tkrySSR
tkryBackend Integration
tkry哲学
このスクラップは2024/09/14にクローズされました