こんにちは！フロントエンドの開発現場で、日夜パフォーマンスチューニングやビルドの高速化に頭を悩ませているあなたへ。
今日は、現代の高速ビルドツール「Vite（ヴィート）」と、Reactなどのコンポーネント開発で大人気の「CSS-in-JS（Styled ComponentsやEmotionなど）」を組み合わせた際に起こる、知られざるパフォーマンスの罠と、それを美しく解決するビルド時抽出戦略についてお話しします。
「これをマスターすれば、毎日のコーディングが劇的に楽になりますよ！」
そして何より、プロダクション環境で見違えるほど軽快に動くWebサイトが作れるようになります。ぜひ最後までついてきてくださいね。
—
1. なぜ「Vite × CSS-in-JS」でパフォーマンス問題が起きるのか？
私たちが普段何気なく使っている Styled Components や Emotion。これらは「コンポーネントの中にCSSを直接書ける」という圧倒的な開発体験を提供してくれます。しかし、その裏側で何が起きているかご存知でしょうか？
従来の Webpack から次世代の Vite へ移行した開発者がよく直面するのが、「開発時は爆速なのに、本番ビルドやHMR（Hot Module Replacement）の一部で妙にもたつく」という現象です。
ランタイム負荷の正体
CSS-in-JS（ランタイム型）は、ブラウザがJavaScriptを読み込んだその瞬間（ランタイム）に、以下の処理を動的に行っています。
1. JSのパースと実行: テンプレートリテラル（CSS文字列）をパースする。
2. スタイルの動的生成: ハッシュ値を計算し、一意のクラス名を生成する。
3. DOMへの挿入: 動的に `