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

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

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
59
要素のサイズを変えずに押しやすくする
Avatar for camcam_lemon lemon
0
78
iOSのキーボード入力ビューをカスタマイズする
Avatar for camcam_lemon lemon
0
260
視え方と文字の大きさ
Avatar for camcam_lemon lemon
1
420
Yarn WorkSpaces × React Nativeの環境構築
Avatar for camcam_lemon lemon
0
300
フロントエンドにおけるアーキテクチャとの向き合い方
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
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 1
Avatar for Philip Schwarz philipschwarz
PRO
0
100
Rails Girls Sapporo 2ndの裏側―準備の日々から見えた、私が得たもの / SAPPORO ENGINEER BASE #11
Avatar for はる lemonade_37
2
190
チーム開発の “地ならし"
Avatar for konifar konifar
8
5.9k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
260
モデル駆動設計をやってみよう Modeling Forum2025ワークショップ/Let’s Try Model-Driven Design
Avatar for haru860 haru860
0
180
Evolving NEWT’s TypeScript Backend for the AI-Driven Era
Avatar for Rodrigo Ramirez xpromx
0
180
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく #phpconfuk
Avatar for Takuma Kajikawa kajitack
12
6.4k
Private APIの呼び出し方
Avatar for Kishikawa Katsumi kishikawakatsumi
3
900
CSC509 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
社内オペレーション改善のためのTypeScript / TSKaigi Hokuriku 2025
Avatar for dachi023 dachi023
1
130
仕様がそのままテストになる！Javaで始める振る舞い駆動開発
Avatar for uutan1108 ohmori_yusuke
8
4.6k
AIの弱点、やっぱりプログラミングは人間が(も)勉強しよう / YAPC AI and Programming
Avatar for Naoki Kishida kishida
13
5.3k

Featured

See All Featured
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
340
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
118
20k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k

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