Tweet
Tweet

Slide 1

Slide 1 text

bundleサイズ2MBの社内サイト 大改修譚 俺の話を聞け！！LT大会 #13

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

社内にReact用のドキュメントサイトがあり React, Reduxのチュートリアルと リファレンスをまとめています ろくにメンテナンスされてないので リプレースを決行

Slide 4

Slide 4 text

今日話すこと ・内部アーキテクトの改善 ・パフォーマンス改善

Slide 5

Slide 5 text

内部アーキテクトの改善 - TypeScript移行 - CSSModulesをstyled-componentsに置き換え - ReduxとReact Hooksとの付き合い方 - Component構成の見直し

Slide 6

Slide 6 text

内部アーキテクトの改善 - TypeScript移行 - CSSModulesをstyled-componentsに置き換え - ReduxとReact Hooksとの付き合い方 - Component構成の見直し

Slide 7

Slide 7 text

元々ReactのClass Componentで 状態を全て管理していた ロジックはutilやlibなどに散乱...

Slide 8

Slide 8 text

ロジックと状態を全てReduxに退避！

Slide 9

Slide 9 text

ところが...

Slide 10

Slide 10 text

React Hooksが発表

Slide 11

Slide 11 text

アプリの設計を考え直すことにした

Slide 12

Slide 12 text

状態管理の責務を分別 Redux React - APIを叩いたレスポンスデータ - DOMの情報 - UIの状態 - 動的に読み込まれるComponent fetch, axiosで取得した未加工データ refを使って取得した要素の高さ等 入力されたテキスト値や セレクトボックスの状態等 dynamic importで取得したComponent history情報や 通信失敗、認証エラー起こしたのか等 - アプリケーションの状態

Slide 13

Slide 13 text

useMemoの活用 レスポンスデータに対して整形処理や演算を施して Componentに渡すことがよくある ReduxのStoreとreselectを併用していたが useMemoに一任した ReduxのStore reselect => useMemo

Slide 14

Slide 14 text

パフォーマンス改善 - webpackのsplitChunk - React.lazyとSuspenseによるdynamic import - highlight.jsの最適化 - preload, prefetchでデータ先読み

Slide 15

Slide 15 text

パフォーマンス改善 - webpackのsplitChunk - React.lazyとSuspenseによるdynamic import - highlight.jsの最適化 - preload, prefetchでデータ先読み

Slide 16

Slide 16 text

React.lazyとSuspenseによるdynamic import 自社でUIライブラリーを作っており そのリファレンスを掲載している ドキュメントとは別にサンプルコンポーネントを 読み込んでおり、サンプルコンポーネントを全て dynamic importで取得するようにした

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

import文にコメントを書くことで build/componentSample配下に サンプルコンポーネントが出力される importされるまでは Loading...と画面に表示される

Slide 19

Slide 19 text

highlight.jsの最適化 - 普通にimportすると全ての言語が読み込まれてしまう - 必要な言語のみ適用するようにする 700KB こうするだけでファイルサイズは約 小さくなる

Slide 20

Slide 20 text

大格闘の末・・・

Slide 21

Slide 21 text

メインのbundle.jsは107KBまで軽量化！

Slide 22

Slide 22 text

まとめ（改修してどうなったか） - コードの見通しは圧倒的によくなった - 責務の分離によりテストも作りやすくなった - First Contentful Paintが約1~1.5秒改善 - コードの美しさに見惚れるようになった（←まじ大事 でもパフォーマンス面はまだまだ改善の余地が

Slide 23

Slide 23 text

ご静聴ありがとうございました！