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
0
250

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

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

camcam_lemon

April 25, 2019
Tweet

More Decks by camcam_lemon

See All by camcam_lemon
要素のサイズを変えずに押しやすくする
Avatar for camcam_lemon lemon
0
54
iOSのキーボード入力ビューをカスタマイズする
Avatar for camcam_lemon lemon
0
220
視え方と文字の大きさ
Avatar for camcam_lemon lemon
1
380
Yarn WorkSpaces × React Nativeの環境構築
Avatar for camcam_lemon lemon
0
270
フロントエンドにおけるアーキテクチャとの向き合い方
Avatar for camcam_lemon lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
Avatar for camcam_lemon lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
Avatar for camcam_lemon lemon
5
970
ESLintで始めるTypeScriptの静的解析
Avatar for camcam_lemon lemon
8
2.1k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
Avatar for camcam_lemon lemon
6
1.5k

Other Decks in Programming

See All in Programming
Lambda(Python)の リファクタリングが好きなんです
Avatar for komakichi komakichi
5
270
カウシェで Four Keys の改善を試みた理由
Avatar for ike ike002jp
1
130
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
Avatar for ChengHao Yang tico88612
0
180
ニーリーQAのこれまでとこれから
Avatar for Nealle nealle
2
770
iOSアプリで測る！名古屋駅までの 方向と距離
Avatar for Ryu-nakayama ryunakayama
0
160
Rubyの!メソッドをちゃんと理解する
Avatar for Yuto Urushima alstrocrack
1
280
The Missing Link in Angular’s Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
はじめてのPDFKit.pdf
Avatar for shoma.kato shomakato
0
100
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
Avatar for Koki Senda thousanda
1
120
2025年のz-index設計を考える
Avatar for TAK tak_dcxi
10
3.8k
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
300
最速Green Tea 🍵 Garbage Collector
Avatar for kuro kuro_kurorrr
1
110

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
230
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
179
53k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
BBQ
Avatar for Matthew Crist matthewcrist
88
9.6k

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. ご静聴ありがとうございました！