Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
bundleサイズ2MBの社内サイト大改修譚.pdf
Search
camcam_lemon
April 25, 2019
Programming
0
250
bundleサイズ2MBの社内サイト大改修譚.pdf
俺の話を聞け!!LT大会 #13の登壇資料です。
camcam_lemon
April 25, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
39
iOSのキーボード入力ビューをカスタマイズする
lemon
0
190
視え方と文字の大きさ
lemon
1
370
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.8k
UI/UXデザイナーがデザインしてるもの
lemon
2
310
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
940
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
Other Decks in Programming
See All in Programming
GAEログのコスト削減
mot_techtalk
0
120
WebDriver BiDiとは何なのか
yotahada3
1
140
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
870
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
35
14k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
120
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.2k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
380
チームリードになって変わったこと
isaka1022
0
190
Featured
See All Featured
Scaling GitHub
holman
459
140k
Why Our Code Smells
bkeepers
PRO
336
57k
Practical Orchestrator
shlominoach
186
10k
Making Projects Easy
brettharned
116
6k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Writing Fast Ruby
sferik
628
61k
A Philosophy of Restraint
colly
203
16k
Facilitating Awesome Meetings
lara
51
6.2k
For a Future-Friendly Web
brad_frost
176
9.5k
Six Lessons from altMBA
skipperchong
27
3.6k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Transcript
bundleサイズ2MBの社内サイト 大改修譚 俺の話を聞け!!LT大会 #13
None
社内にReact用のドキュメントサイトがあり React, Reduxのチュートリアルと リファレンスをまとめています ろくにメンテナンスされてないので リプレースを決行
今日話すこと ・内部アーキテクトの改善 ・パフォーマンス改善
内部アーキテクトの改善 - TypeScript移行 - CSSModulesをstyled-componentsに置き換え - ReduxとReact Hooksとの付き合い方 - Component構成の見直し
内部アーキテクトの改善 - TypeScript移行 - CSSModulesをstyled-componentsに置き換え - ReduxとReact Hooksとの付き合い方 - Component構成の見直し
元々ReactのClass Componentで 状態を全て管理していた ロジックはutilやlibなどに散乱...
ロジックと状態を全てReduxに退避!
ところが...
React Hooksが発表
アプリの設計を考え直すことにした
状態管理の責務を分別 Redux React - APIを叩いたレスポンスデータ - DOMの情報 - UIの状態 -
動的に読み込まれるComponent fetch, axiosで取得した未加工データ refを使って取得した要素の高さ等 入力されたテキスト値や セレクトボックスの状態等 dynamic importで取得したComponent history情報や 通信失敗、認証エラー起こしたのか等 - アプリケーションの状態
useMemoの活用 レスポンスデータに対して整形処理や演算を施して Componentに渡すことがよくある ReduxのStoreとreselectを併用していたが useMemoに一任した ReduxのStore reselect => useMemo
パフォーマンス改善 - webpackのsplitChunk - React.lazyとSuspenseによるdynamic import - highlight.jsの最適化 - preload,
prefetchでデータ先読み
パフォーマンス改善 - webpackのsplitChunk - React.lazyとSuspenseによるdynamic import - highlight.jsの最適化 - preload,
prefetchでデータ先読み
React.lazyとSuspenseによるdynamic import 自社でUIライブラリーを作っており そのリファレンスを掲載している ドキュメントとは別にサンプルコンポーネントを 読み込んでおり、サンプルコンポーネントを全て dynamic importで取得するようにした
None
import文にコメントを書くことで build/componentSample配下に サンプルコンポーネントが出力される importされるまでは Loading...と画面に表示される
highlight.jsの最適化 - 普通にimportすると全ての言語が読み込まれてしまう - 必要な言語のみ適用するようにする 700KB こうするだけでファイルサイズは約 小さくなる
大格闘の末・・・
メインのbundle.jsは107KBまで軽量化!
まとめ(改修してどうなったか) - コードの見通しは圧倒的によくなった - 責務の分離によりテストも作りやすくなった - First Contentful Paintが約1~1.5秒改善 -
コードの美しさに見惚れるようになった(←まじ大事 でもパフォーマンス面はまだまだ改善の余地が
ご静聴ありがとうございました!