Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

camcam_lemon

April 25, 2019
Tweet

More Decks by camcam_lemon

Other Decks in Programming

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