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 full-size slide

  2. 社内にReact用のドキュメントサイトがあり

    React, Reduxのチュートリアルと

    リファレンスをまとめています
    ろくにメンテナンスされてないので

    リプレースを決行

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 元々ReactのClass Componentで

    状態を全て管理していた

    ロジックはutilやlibなどに散乱...

    View full-size slide

  7. ロジックと状態を全てReduxに退避!

    View full-size slide

  8. ところが...

    View full-size slide

  9. React Hooksが発表

    View full-size slide

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

    View full-size slide

  11. 状態管理の責務を分別
    Redux React
    - APIを叩いたレスポンスデータ - DOMの情報
    - UIの状態
    - 動的に読み込まれるComponent
    fetch, axiosで取得した未加工データ refを使って取得した要素の高さ等
    入力されたテキスト値や

    セレクトボックスの状態等
    dynamic importで取得したComponent
    history情報や

    通信失敗、認証エラー起こしたのか等
    - アプリケーションの状態

    View full-size slide

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

    useMemoに一任した
    ReduxのStore

    reselect => useMemo

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. React.lazyとSuspenseによるdynamic import
    自社でUIライブラリーを作っており

    そのリファレンスを掲載している


    ドキュメントとは別にサンプルコンポーネントを

    読み込んでおり、サンプルコンポーネントを全て
    dynamic importで取得するようにした

    View full-size slide

  16. import文にコメントを書くことで
    build/componentSample配下に

    サンプルコンポーネントが出力される

    importされるまでは

    Loading...と画面に表示される

    View full-size slide

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

    View full-size slide

  18. 大格闘の末・・・

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. ご静聴ありがとうございました!

    View full-size slide