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
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
3
1.4k
Spec-driven Development with AI
Avatar for Simon Martinelli simas
PRO
0
2.2k
Modernizing iOS Apps
Avatar for seyfeddin seyfoyun
0
150
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
190
AI時代のシニアエンジニアとは
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
14
11k
複数ドメインを一つのアプリに統合するFlutterの設計と運用_FlutterKaigi2026登壇資料（須永高弘）
Avatar for 須永高弘 takahirosunaga
0
130
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
Avatar for Ochtum ochtum
0
180
우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다
Avatar for HyunWoo Lee l2hyunwoo
0
250
Materialが消えた日 〜真っ白なFlutterキャンバスにRenderObjectで絵を描く〜
Avatar for Aoi Umigishi umigishiaoi
0
140
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
300
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
Avatar for Geunhyeok LEE leegeunhyeok
0
180
Web3Dライブラリを作ってVue Custom Rendererの仕組みを理解しよう / lets learn vue custom renderer by making 3d library
Avatar for にー兄さん drumath2237
1
120

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.3k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
370
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.9k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
660
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
480
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
40k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
620
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.6k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
620

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