俺の話を聞け!!LT大会 #13の登壇資料です。
bundleサイズ2MBの社内サイト大改修譚俺の話を聞け!!LT大会 #13
View Slide
社内にReact用のドキュメントサイトがありReact, Reduxのチュートリアルとリファレンスをまとめていますろくにメンテナンスされてないのでリプレースを決行
今日話すこと・内部アーキテクトの改善・パフォーマンス改善
内部アーキテクトの改善- TypeScript移行- CSSModulesをstyled-componentsに置き換え- ReduxとReact Hooksとの付き合い方- Component構成の見直し
元々ReactのClass Componentで状態を全て管理していたロジックはutilやlibなどに散乱...
ロジックと状態を全てReduxに退避!
ところが...
React Hooksが発表
アプリの設計を考え直すことにした
状態管理の責務を分別Redux React- APIを叩いたレスポンスデータ - DOMの情報- UIの状態- 動的に読み込まれるComponentfetch, axiosで取得した未加工データ refを使って取得した要素の高さ等入力されたテキスト値やセレクトボックスの状態等dynamic importで取得したComponenthistory情報や通信失敗、認証エラー起こしたのか等- アプリケーションの状態
useMemoの活用レスポンスデータに対して整形処理や演算を施してComponentに渡すことがよくあるReduxのStoreとreselectを併用していたがuseMemoに一任したReduxのStorereselect => useMemo
パフォーマンス改善- webpackのsplitChunk- React.lazyとSuspenseによるdynamic import- highlight.jsの最適化- preload, prefetchでデータ先読み
React.lazyとSuspenseによるdynamic import自社でUIライブラリーを作っておりそのリファレンスを掲載しているドキュメントとは別にサンプルコンポーネントを読み込んでおり、サンプルコンポーネントを全てdynamic importで取得するようにした
import文にコメントを書くことでbuild/componentSample配下にサンプルコンポーネントが出力されるimportされるまではLoading...と画面に表示される
highlight.jsの最適化- 普通にimportすると全ての言語が読み込まれてしまう- 必要な言語のみ適用するようにする700KBこうするだけでファイルサイズは約 小さくなる
大格闘の末・・・
メインのbundle.jsは107KBまで軽量化!
まとめ(改修してどうなったか)- コードの見通しは圧倒的によくなった- 責務の分離によりテストも作りやすくなった- First Contentful Paintが約1~1.5秒改善- コードの美しさに見惚れるようになった(←まじ大事でもパフォーマンス面はまだまだ改善の余地が
ご静聴ありがとうございました!