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

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

A3ec73809a2105b3a9a829f983f6587e?s=47 camcam_lemon
April 25, 2019
Programming
0
200

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

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

A3ec73809a2105b3a9a829f983f6587e?s=128

camcam_lemon

April 25, 2019
Tweet

More Decks by camcam_lemon

See All by camcam_lemon
Yarn WorkSpaces × React Nativeの環境構築
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
81
フロントエンドにおけるアーキテクチャとの向き合い方
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
9
4k
UI/UXデザイナーがデザインしてるもの
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
2
290
react-reduxで追加されたHooks APIの良い所と使い方
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
5
830
ESLintで始めるTypeScriptの静的解析
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
8
1.5k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
6
1.1k
React.lazyとSuspenseで行うLazy Load
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
2
320
なんとなくで書かないReact/ReduxのテストTips
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
0
240
反復処理に速さを求めて
A3ec73809a2105b3a9a829f983f6587e?s=48 lemon
1
130

Other Decks in Programming

See All in Programming
リーダブルテストコード / #vstat
48a913a2e3bb5e68aae6f73079648e84?s=48 jnchito
48
37k
パスワードに関する最近の動向
8fd1ae6548d5ab14139c8d8032b76ee1?s=48 kenchan0130
1
330
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
6f425ca5b796b421dca359b95046184f?s=48 findyinc
7
2.7k
20220706_Google Apps Scriptを実演で学ぶ～ GAS × Slack ～
C983c1e22d0d19f21590b83884d9b754?s=48 apachan
2
630
Git操作編
A3efba75cfbb0b7d5248eb74d1d29d79?s=48 smt7174
2
260
Amazon Lookout for Visionで 筆跡鑑定してみた
B3cc0e7ba8e6c941f08a2e6f69d3e4c2?s=48 cmnakamurashogo
0
180
YATA: collaborative documents and how to make them fast
009174d68aa95ae39054afa749013f78?s=48 horusiath
1
170
OSS貢献を気軽にしたい Let's Go Talk #1
Aa0368c69701536321af9db1ae552b45?s=48 yuyaabo
2
240
Atomic Design とテストの○○な話
Fd3e212c7b5255c6164d7d52bfe79dfb?s=48 takfjp
2
820
夕食断食にTRY!/for-lt-12th
82492720940b57cec5072e190213ba3a?s=48 pachikuriii
0
250
kintone × LINE Bot で餃子検定Botを作った話
9452778272d5d1a19e897f4b75204fb2?s=48 naberina
0
340
ベストプラクティス・ドリフト
A15b71ae6fbdecb3216bdcba552d9a77?s=48 sssssssssssshhhhhhhhhh
1
220

Featured

See All Featured
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
239
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
15
3.9k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
26k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.6k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
7.4k
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
Bootstrapping a Software Product
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
296
110k
Building Applications with DynamoDB
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
84
4.8k
GitHub's CSS Performance
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
420k
Git: the NoSQL Database
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
59k

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