ViteのdevServerの出力を観察しよう by yuta-ike

Viteでシンプルなカウンターアプリを作成し、開発サーバを起動したあと、ブラウザに配信されるJSファイルには様々な工夫が施されています。
例えばソースマップの情報が追加されていたり、HMRのための処理が追加されていたり、jsx（<Hoge/>）がjsxDEV関数の呼び出しに変換されファイル名などが追加されていたりします。
このセッションでは、実際に出力されたJSファイルを見ながら、それらが何のために追加・変換され、私たちの開発体験をどのように向上させているのかを説明します。

出力ファイルをフックに、深さより広さを優先して下記の内容について触れる予定です。
初学者の方が、フロントエンドの高い開発体験の裏側にある技術について、興味を持つきっかけになると嬉しいです。

• ソースマップ
• react-refresh
• jsxの変換
• /@_ PURE _/