bundleサイズ2MBの社内サイト大改修譚.pdf

俺の話を聞け！！LT大会 #13の登壇資料です。

Transcript

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

   View Slide

2. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. ところが...
   

   View Slide

10. React Hooksが発表
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. View Slide

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

    View Slide

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

    View Slide

20. 大格闘の末・・・
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide