Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for camcam_lemon camcam_lemon
April 25, 2019
Programming
270
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
95
要素のサイズを変えずに押しやすくする
Avatar for camcam_lemon lemon
0
110
iOSのキーボード入力ビューをカスタマイズする
Avatar for camcam_lemon lemon
0
350
視え方と文字の大きさ
Avatar for camcam_lemon lemon
1
480
Yarn WorkSpaces × React Nativeの環境構築
Avatar for camcam_lemon lemon
0
350
フロントエンドにおけるアーキテクチャとの向き合い方
Avatar for camcam_lemon lemon
10
5.1k
UI/UXデザイナーがデザインしてるもの
Avatar for camcam_lemon lemon
2
360
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
AI-Powered Domain-Driven Design
Avatar for Alberto Brandolini ziobrando
0
370
Spec-Driven Development - Why Vaadin Is the Perfect Fit
Avatar for Simon Martinelli simas
PRO
0
210
Spec-driven Development with AI
Avatar for Simon Martinelli simas
PRO
0
2.2k
Crash Auto Pipelines
Avatar for Veronikapj veronikapj
1
320
AIがコードを書いてくれる時代、我々は何を確かめるのか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
13
5.5k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
540
[JA] Domain Modeling with Vanilla Rails: 「操作」から再考するRailsの設計論
Avatar for Yuichi Goto yasaichi
4
1.7k
우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다
Avatar for HyunWoo Lee l2hyunwoo
0
250
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
3
1.4k
Performance Optimization With LLMs
Avatar for xLeitix xleitix
0
230
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
590
SODA - FACT BOOK（JP）
Avatar for SODA inc. sodainc
1
40k

Featured

See All Featured
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
10
37k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
350
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.6k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
350
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.9k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
550
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.2k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.6k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.9k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
2
1k

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