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
React code Splitting
Search
Hayashi Takao
May 27, 2019
Programming
1
550
React code Splitting
React code Splittingについてのきほんとその効果
Hayashi Takao
May 27, 2019
Tweet
Share
More Decks by Hayashi Takao
See All by Hayashi Takao
今日から始めるWeb Components
remrem0090
0
74
Reactで始めるsencer入門
remrem0090
0
48
今日から始めるgithub actions
remrem0090
0
43
Reactでのマルチストア運用を考察する
remrem0090
0
220
effectorを使い倒してReduxのかわりになるか検証する
remrem0090
1
770
Other Decks in Programming
See All in Programming
Cursorハンズオン実践!
eltociear
2
1k
CSC509 Lecture 05
javiergs
PRO
0
300
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
CSC509 Lecture 06
javiergs
PRO
0
260
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
1k
Software Architecture
hschwentner
6
2.3k
CSC305 Lecture 04
javiergs
PRO
0
270
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
470
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
470
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
710
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Six Lessons from altMBA
skipperchong
28
4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Building Applications with DynamoDB
mza
96
6.7k
Building Adaptive Systems
keathley
43
2.8k
It's Worth the Effort
3n
187
28k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Transcript
Reactパフォーマンス改善 Takao hayashi
自己紹介 株式会社サイバー・バズ 林 恭央 twitter / @almomdchocolate github / takao-h インフルエンサーマーケティングの会社でReactとScalaを書いている人です。
絶賛採用中なのできになる方は声かけてくださいw
Time Line - react のパフォーマンスを改善したい! - 手段の選定 - code splittingの基本
- NINARYの採用事例 - まとめ
【問題】 Reactの初期レンダリングが重い。 パフォーマンスの低下によりUXも低下。 Reactのパフォーマンスを改善したい!
【原因】 初期レンダリングで読み込まれるソースが多い。 Reactのパフォーマンスを改善したい!
具体的にどういうこと?
None
Reactで開発を進めて行くと - 可読性 - 再利用性 の観点からコードを分割し開発が進む。(モジュール化) また、個々のモジュールが必要に応じてAPIとの通信をしており 初期レンダリングでページに表示される全てを読み込むと 同時多発的に通信とレンダリングが行われ モジュール全てが値を返し切らないと表示がされない。
なぜ初期の読み込みが多くなってしまう?
- 可読性 - 再利用性 を損なわずに、コードの変更量は少なく かつ効率良いリソースの読み込みがしたい!!! 解決策として期待するもの
Reactのパフォーマンスを改善したい! - 1 【解決策】 パフォーマンスを改善する!! パフォーマンス改善の方法は色々ある - SSR - lazy
load - code splitting etc...
Reactのパフォーマンスを改善したい! - 2 解決手段は色々とあるが、本質的には - ソースの読み込み量を減らし - 必要なリソースを適宜取得する この2つを満たすことが理想。
SSR (Server Side Rendering) サーバーで初期のHTMLを組み立 てておき、routeで定義されたパス にアクセスしたとき初期 HTMLを返 却し、そのあとバンドルした JSを読
み込ませる。 Nuxt.js、Next.jsで標準実装されて おり表示速度を改善できる。 SEOに対して強い lazy load データを遅延して読み込む 画像などを多用する場合に効果が 高い。 表示されていないデータやソース を遅延して読み込むことでパフォー マンスを改善する code splitting routeごとにJSのファイルを分割し バンドルファイルの初期ロードを小 さくすることで表示までの時間を短 縮できる。 今回はこれのお話
React code splittingとは? コードを分割すること。分割されたコードはアクションに応じて非同期で読み込まれる。 SPAでも効果あり。 images from: Qiita
ちなみに。。。 SSRしたらcode splittingがいらないかといえばそんなことはない。 (バンドルサイズを下げられるわけではないため) また、code splittingしたらSSRがいらないかといえばそんなこともない。 (HTMLをサーバーでビルドしてるわけではないため) 併用することで最大のパフォーマンスが出せるので、 ユーザー画面では積極的に併用して速さを追求したい。
code splittingの基本パターン 1. page 2. Fold 3. Temporal
1. page ページごとに分割をしてルートの変換が行われたときに読み込まれるようにする考え 方。routes.jsでおこなわれる。
2. Fold Fold(初期表示領域)を優先的に読みこみ後ろに追随するコンテンツを 非同期で読み込む考え方。 コンテンツの特徴によってはただただトリッキーな実装になったり code splittingをしたときのwrapコンポーネントが必要だったりする。
3. Temporal モーダルとかツールチップのような最初に表示されないUI要素を トリガーがとなる要素が現れたとき初めて読み込みにいくようにする考え方。
NINARYではこんな風に
動的にインポートを行う。 routes.ts React.lazy
suspense / fallback suspense 要素が読み込まれるまでの間に ロード画面を出したり別要素を出せる fallback コンポーネントのロードを待っている間に レンダリングしたいReact要素を全て受け入れる。 suspenseでラップできる。
None
NINARYでの効果 dev環境でファイルサイズが半分に prod環境でさらに半分近くに! 効果えぐいです。 ただwebpackの設定の調整は重要!! バンドルされるファイルにハッシュを入れたりバンドルファイルが読まれる順序を設定 側でいじくってやる必要はある。
prefetch / preload prefetch chunkしたモジュールを事前に読み込むことが可能 importの関数内でコメントをつけとくだけでいい。 順番をつけたい時は`true`の部分に数字を入れる。 preload こちらもコメントをつける。 `
/* webpackPreload: true*/ ` prefetchとの違いは prefetch => ナビゲーションの前に動作 preload => ナビゲーション後に動作 https://blog.jxck.io/entries/2016-03-04/preload.html
webpackの話 webpackの設定から1.bundle.jsと表示されるのをいじる 名前をつけてあげることで読み込みの順番などをデバッグできる。 またchunkの設定を書き直すことでエントリーポイントの
こんなcode splittingのためのライブラリも https://github.com/smooth-code/loadable-components
まとめ - code splittingによってバンドルサイズを減らしレンダリングを改善できる! - ユーザー向けの画面ならばSSRとの併用が好ましい。 - ファイル分割によってレイテンシーが増えるのでチューニングと再利用性のバラン スを取るのは重要 -
速さは正義!!!!