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

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

 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
66
要素のサイズを変えずに押しやすくする
Avatar for camcam_lemon lemon
0
82
iOSのキーボード入力ビューをカスタマイズする
Avatar for camcam_lemon lemon
0
290
視え方と文字の大きさ
Avatar for camcam_lemon lemon
1
430
Yarn WorkSpaces × React Nativeの環境構築
Avatar for camcam_lemon lemon
0
320
フロントエンドにおけるアーキテクチャとの向き合い方
Avatar for camcam_lemon lemon
10
5k
UI/UXデザイナーがデザインしてるもの
Avatar for camcam_lemon lemon
2
330
react-reduxで追加されたHooks APIの良い所と使い方
Avatar for camcam_lemon lemon
5
1k
ESLintで始めるTypeScriptの静的解析
Avatar for camcam_lemon lemon
8
2.1k

Other Decks in Programming

See All in Programming
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
560
React Native × React Router v7 API通信の共通化で考えるべきこと
Avatar for Suguru Ohki suguruooki
0
100
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
5
800
CSC307 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
370
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
210
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
210
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
250
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
390
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k

Featured

See All Featured
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
120
It's Worth the Effort
Avatar for 3n 3n
188
29k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
180
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
900
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
440
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
280
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k

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