Viteを学びたいという気持ちがある

新しいフロントエンドとしてのナレッジが欲しい&ローカルでの実行速度がとにかく遅いのが気になるのでViteをば試してみる。

Viteとはなんぞや

Vue/React/Preactに使うことのできるビルドツール。
ノーバンドルでビルドを行うので、速度が早くなるらしい（開発環境の時）。
開発時のビルド高速化、さらにHMR（画面の再描画なしにファイル変更をブラウザは適用する機能）がモジュール総数と切り離されているので高速になる。

そもそも自分の中で学べていなかったこと

バンドルってなにというところがわかっていなかった。
バンドルは言葉的なところでもわかるようにファイルをまとめ上げること。
Webpackあたりがやっていること（ここも今一度しっかりと学習したいところではある）。
ViteではRollup.jsをプロダクションビルドの時に使っている（リンクはQiitaのもの）。

ViteでVueアプリを実際に作ってみた感想

Vueアプリを作ったのが久しぶりすぎてあんまり思い出せないが、かなり起動まで早かった（1秒くらいで動いた）気がする。
正直大規模なアプリじゃないとわからない&気になるのはプロダクションビルドでどうなるかなので、どうにも言えない。

yarn create vite

ここから先は従って操作（何のアプリをつくるか）

メモ的なもの（参考URL含む）

フロントエンドの爆速な開発サーバを実現する Vite がバージョン2.0になったので変更点を眺めてみる
Vite2.0の発表
Viteとは何なのか
jQueryからTypeScript・Reactまで！Viteで始めるモダンで高速な開発環境構築
pnpm + Vite + Vue + TypeScript で新規プロジェクトを作成する
ViteをNuxtで試した
Vite自体はすでにVersion.2で正式なリリースをしているので普通には使える
V2ではSSRも対象になってきていた
ただ今V2.5くらいになっているのでいまはどのようなサポート体制化はわからない
モジュール分割をするらしいので、必要な個所のみコンパイル、動作するというわけっぽい

Nuxtのアプリでどの程度かかるかけいそく

14Sec
若干のディレイで更新される
Viteにしたとき
2Sec
更新もめっちゃ早い、書き換えたらすぐだった
Hot reloadどころか即書き換えな感じ、おもろい