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

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

camcam_lemon
April 25, 2019
Programming
0
250

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

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

camcam_lemon

April 25, 2019
Tweet

More Decks by camcam_lemon

See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
52
iOSのキーボード入力ビューをカスタマイズする
lemon
0
210
視え方と文字の大きさ
lemon
1
380
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
960
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k

Other Decks in Programming

See All in Programming
PHP で学ぶ OAuth 入門
azuki
1
190
Bedrock×MCPで社内ブログ執筆文化を育てたい！
har1101
6
1k
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
160
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
110
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
510
Making TCPSocket.new "Happy"!
coe401_
1
1.2k
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1k
The Evolution of the CRuby Build System
kateinoigakukun
0
700
Fiber Scheduler vs. General-Purpose Parallel Client
hayaokimura
1
100
Vibe Codingをせずに Clineを使っている
watany
17
6.3k
Strategic Design (DDD) for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
150
Ruby's Line Breaks
yui_knk
2
950

Featured

See All Featured
RailsConf 2023
tenderlove
30
1.1k
For a Future-Friendly Web
brad_frost
176
9.7k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Facilitating Awesome Meetings
lara
54
6.3k
The Cult of Friendly URLs
andyhume
78
6.3k
A designer walks into a library…
pauljervisheath
205
24k
The Pragmatic Product Professional
lauravandoore
33
6.5k
We Have a Design System, Now What?
morganepeng
52
7.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k

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