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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
93
要素のサイズを変えずに押しやすくする
Avatar for camcam_lemon lemon
0
100
iOSのキーボード入力ビューをカスタマイズする
Avatar for camcam_lemon lemon
0
340
視え方と文字の大きさ
Avatar for camcam_lemon lemon
1
480
Yarn WorkSpaces × React Nativeの環境構築
Avatar for camcam_lemon lemon
0
340
フロントエンドにおけるアーキテクチャとの向き合い方
Avatar for camcam_lemon lemon
10
5.1k
UI/UXデザイナーがデザインしてるもの
Avatar for camcam_lemon lemon
2
350
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
golang-bob.pdf
Avatar for Yura Iwatsuka iwatsukayura
0
120
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
8
5.7k
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.7k
Java 27新機能 / Java 27 new features
Avatar for Naoki Kishida kishida
2
220
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
380
dotNET_vulnclicker_intro.pdf
Avatar for Tomohiko Morita deka_morita
0
140
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
760
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
5
5.1k
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
370
Compiling a real-world CLI tool to native with Static Hermes
Avatar for Tzvetan Mikov tmikov2023
0
110
HTML-in-Canvasで作る未来のWeb UI表現
Avatar for IKEDA Yasunobu clockmaker
4
4.5k
Workers Cache を知る
Avatar for syumai syumai
0
350

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
350
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
420
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
1k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
184
10k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
800
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
240
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k

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