Viteにおける『CSS-in-JS』のパフォーマンス最適化：ランタイム負荷を軽減するビルド時抽出戦略
テックリードの皆さん、日々のフロントエンド開発におけるビルドパフォーマンスとランタイムの最適化に頭を悩ませていないだろうか。
モダンなReactアプリケーション開発において、`styled-components`や`Emotion`に代表されるCSS-in-JSは、コンポーネントカプセル化の強力な武器として広く採用されてきた。しかし、Viteという圧倒的な高速ビルド環境において、これら伝統的なCSS-in-JSを「そのまま」使うことは、実はパフォーマンス上の重大なアンチパターンになり得る。
なぜなら、多くのCSS-in-JSライブラリは、ブラウザがレンダリングを行うまさにその瞬間（ランタイム）に、JavaScriptの文字列操作として動的にスタイルを生成・挿入しているからだ。この処理は、特にモバイルデバイスや低スペック環境における初期描画（FCP / TTI）の深刻なボトルネックとなる。また、HMR（Hot Module Replacement）時においても、Viteのミリ秒単位の爆速フィードバックを殺す要因になりかねない。
本稿では、Viteの圧倒的なESMベースのビルドパイプラインを最大限に活かしつつ、CSS-in-JSのランタイム負荷をゼロ、あるいは極限まで削ぎ落とす「ビルド時静的抽出戦略」の全貌を、実務の現場で即座に使える設定とともに解き明かす。
—
1. なぜランタイムCSS-in-JSはViteの足を引っ張るのか？（内部メカニズムの解剖）
Webpack時代から続く多くのCSS-in-JSライブラリは、ランタイムで次のような重い処理を実行している。
1. スタイルのハッシュ化とパース: コンポーネントが評価されるたびに、テンプレートリテラルをパースし、一意のクラス名ハッシュを生成。
2. CSSOMの動的構築: 生成されたCSS文字列を `