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

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

Avatar for camcam_lemon camcam_lemon
April 25, 2019
Programming
260
0

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

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

Avatar for camcam_lemon

camcam_lemon

April 25, 2019

More Decks by camcam_lemon

See All by camcam_lemon
オレを実装してデザイン実装楽したい
Avatar for camcam_lemon lemon
0
84
要素のサイズを変えずに押しやすくする
Avatar for camcam_lemon lemon
0
93
iOSのキーボード入力ビューをカスタマイズする
Avatar for camcam_lemon lemon
0
320
視え方と文字の大きさ
Avatar for camcam_lemon lemon
1
460
Yarn WorkSpaces × React Nativeの環境構築
Avatar for camcam_lemon lemon
0
330
フロントエンドにおけるアーキテクチャとの向き合い方
Avatar for camcam_lemon lemon
10
5.1k
UI/UXデザイナーがデザインしてるもの
Avatar for camcam_lemon lemon
2
340
react-reduxで追加されたHooks APIの良い所と使い方
Avatar for camcam_lemon lemon
5
1.1k
ESLintで始めるTypeScriptの静的解析
Avatar for camcam_lemon lemon
8
2.2k

Other Decks in Programming

See All in Programming
jQueryをバージョンアップする前に使いたいjQuery Migrate
Avatar for Atsushi Matsuo matsuo_atsushi
0
190
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
100
GitHub Copilot CLIのいいところ
Avatar for tkym htkym
2
1.3k
LLM Plugin for Node-REDの利用方法と開発について
Avatar for 404background 404background
0
160
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
Avatar for ming ming_ayami
0
110
tsserverとは何だったのか、これからどうなるのか
Avatar for Ryota Nakamura nowaki28
1
450
プロパティの順序で型推論が壊れる!? TypeScript6.0の修正からContext-Sensitivityの仕組みを追う
Avatar for おおいし bicstone
2
1.3k
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
440
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
150
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
500
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
270
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
Avatar for minako-ph minako__ph
4
1.4k

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
300
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
220
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.8k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
200
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
250
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.5k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
220
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
600

Transcript

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

  2. None

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

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

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

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

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

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

  9. ところが...

  10. React Hooksが発表

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

  12. 状態管理の責務を分別 Redux React - APIを叩いたレスポンスデータ - DOMの情報 - UIの状態 -

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

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

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

    prefetchでデータ先読み

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

    prefetchでデータ先読み

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

  17. None

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

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

  20. 大格闘の末・・・

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

  22. まとめ（改修してどうなったか） - コードの見通しは圧倒的によくなった - 責務の分離によりテストも作りやすくなった - First Contentful Paintが約1~1.5秒改善 -

    コードの美しさに見惚れるようになった（←まじ大事 でもパフォーマンス面はまだまだ改善の余地が

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