React勉強会@福岡 vol.1(2019/01/25)の発表資料3つめです。 すごく簡易的な検証なのでいろいろなシーンで追加の検証をしていきたい。
styled-components or emotion ?React勉強会@福岡 vol.1 / Jan 25th, 2019 ponday (@ponday_dev)
View Slide
Profile- ponday (Honda, Yusuke)- 株式会社ベガコーポレーション エンジニア- Like : TypeScript / Elixir / Python etc…- 日曜フロントエンドエンジニア- 副業もやってます
Reactでよく聞くCSS in JS
styled-components
emotion
で、 結局どっち使えばいいの?
styled-components vs emotion- styled-componentsのほうが人気っぽい- GitHubのstar数はstyled-componentsのほうが多い- emotionも伸びてきている- emotionのほうが後発で高機能- 開発はどちらもアクティブ- styled-components v4で速くなったらしい
検証してみた
速度検証- スタイル付きのリスト(1万件)の表示速度を図る- componentWillMount 〜 componentDidMountまで- 10回平均- 以下の3つのコードで検証- styled-components- emotion (CSS style)- emotion (styled)
emotion (CSS style)
emotion (styled)
結果styled-componentsemotion (CSS style)emotion (styled)キャッシュなし キャッシュあり762ms1103ms507ms596ms1033ms421ms
検証- @emotion/styledが速そう?- styled-componentsも実用レベル- 意外とemotion標準のオブジェクト型が遅い- 簡易的な検証なのでいろいろ試していきたい
Thank you !!