CSS in JS / CSS modules ベンチマーク検証

  • 各ライブラリの導入環境下で、5000 枚のダミーイメージをレンダリングするコンポーネントを作成し、どの程度の時間を要しているかをプロファイリング結果から分析・評価を行う。

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja

ライブラリ名 検証リポジトリ 公式ドキュメント
CSS Modules https://github.com/yud0uhu/basic-css-modules-app https://github.com/css-modules/css-modules
Emotion https://github.com/yud0uhu/basic-emotion-app https://emotion.sh/docs/introduction
Kuma UI https://github.com/yud0uhu/basic-kuma-ui-app https://www.kuma-ui.com/docs
Linalia https://github.com/yud0uhu/basic-linalia-app https://github.com/callstack/linaria/tree/master/docs/
Panda CSS https://github.com/yud0uhu/basic-panda-app https://panda-css.com/docs/overview/getting-started
Stitches https://github.com/yud0uhu/basic-stitches-app https://stitches.dev/docs/introduction
Styled Components https://github.com/yud0uhu/basic-styled-components-app https://styled-components.com/docs