React code Splitting

React code Splittingについてのきほんとその効果

Transcript

1. Reactパフォーマンス改善 Takao hayashi
2. 自己紹介 株式会社サイバー・バズ 林　恭央 twitter / @almomdchocolate github / takao-h インフルエンサーマーケティングの会社でReactとScalaを書いている人です。 絶賛採用中なのできになる方は声かけてくださいw
3. Time Line - react のパフォーマンスを改善したい！ - 手段の選定 - code splittingの基本 - NINARYの採用事例 - まとめ
4. 【問題】 Reactの初期レンダリングが重い。 パフォーマンスの低下によりUXも低下。 Reactのパフォーマンスを改善したい！
5. 【原因】 初期レンダリングで読み込まれるソースが多い。 Reactのパフォーマンスを改善したい！
6. 具体的にどういうこと？
8. Reactで開発を進めて行くと - 可読性 - 再利用性 の観点からコードを分割し開発が進む。(モジュール化) また、個々のモジュールが必要に応じてAPIとの通信をしており 初期レンダリングでページに表示される全てを読み込むと 同時多発的に通信とレンダリングが行われ モジュール全てが値を返し切らないと表示がされない。 なぜ初期の読み込みが多くなってしまう？
9. - 可読性 - 再利用性 を損なわずに、コードの変更量は少なく かつ効率良いリソースの読み込みがしたい！！！ 解決策として期待するもの
10. Reactのパフォーマンスを改善したい！ - 1 【解決策】 パフォーマンスを改善する！！ パフォーマンス改善の方法は色々ある - SSR - lazy load - code splitting etc...
11. Reactのパフォーマンスを改善したい！ - 2 解決手段は色々とあるが、本質的には - ソースの読み込み量を減らし - 必要なリソースを適宜取得する この2つを満たすことが理想。
12. SSR (Server Side Rendering) サーバーで初期のHTMLを組み立 てておき、routeで定義されたパス にアクセスしたとき初期 HTMLを返 却し、そのあとバンドルした JSを読 み込ませる。 Nuxt.js、Next.jsで標準実装されて おり表示速度を改善できる。 SEOに対して強い lazy load データを遅延して読み込む 画像などを多用する場合に効果が 高い。 表示されていないデータやソース を遅延して読み込むことでパフォー マンスを改善する code splitting routeごとにJSのファイルを分割し バンドルファイルの初期ロードを小 さくすることで表示までの時間を短 縮できる。 今回はこれのお話
13. React code splittingとは? コードを分割すること。分割されたコードはアクションに応じて非同期で読み込まれる。 SPAでも効果あり。 images from: Qiita
14. ちなみに。。。 SSRしたらcode splittingがいらないかといえばそんなことはない。 (バンドルサイズを下げられるわけではないため) また、code splittingしたらSSRがいらないかといえばそんなこともない。 (HTMLをサーバーでビルドしてるわけではないため) 併用することで最大のパフォーマンスが出せるので、 ユーザー画面では積極的に併用して速さを追求したい。
15. code splittingの基本パターン 1. page 2. Fold 3. Temporal
16. 1. page ページごとに分割をしてルートの変換が行われたときに読み込まれるようにする考え 方。routes.jsでおこなわれる。
17. 2. Fold Fold（初期表示領域）を優先的に読みこみ後ろに追随するコンテンツを 非同期で読み込む考え方。 コンテンツの特徴によってはただただトリッキーな実装になったり code splittingをしたときのwrapコンポーネントが必要だったりする。
18. 3. Temporal モーダルとかツールチップのような最初に表示されないUI要素を トリガーがとなる要素が現れたとき初めて読み込みにいくようにする考え方。
19. NINARYではこんな風に
20. 動的にインポートを行う。 routes.ts React.lazy
21. suspense / fallback suspense 要素が読み込まれるまでの間に ロード画面を出したり別要素を出せる fallback コンポーネントのロードを待っている間に レンダリングしたいReact要素を全て受け入れる。 suspenseでラップできる。
23. NINARYでの効果 dev環境でファイルサイズが半分に prod環境でさらに半分近くに！ 効果えぐいです。 ただwebpackの設定の調整は重要！！ バンドルされるファイルにハッシュを入れたりバンドルファイルが読まれる順序を設定 側でいじくってやる必要はある。
24. prefetch / preload prefetch chunkしたモジュールを事前に読み込むことが可能 importの関数内でコメントをつけとくだけでいい。 順番をつけたい時は`true`の部分に数字を入れる。 preload こちらもコメントをつける。 ` /* webpackPreload: true*/ ` prefetchとの違いは prefetch => ナビゲーションの前に動作 preload => ナビゲーション後に動作 https://blog.jxck.io/entries/2016-03-04/preload.html
25. webpackの話 webpackの設定から1.bundle.jsと表示されるのをいじる 名前をつけてあげることで読み込みの順番などをデバッグできる。 またchunkの設定を書き直すことでエントリーポイントの
26. こんなcode splittingのためのライブラリも https://github.com/smooth-code/loadable-components
27. まとめ - code splittingによってバンドルサイズを減らしレンダリングを改善できる！ - ユーザー向けの画面ならばSSRとの併用が好ましい。 - ファイル分割によってレイテンシーが増えるのでチューニングと再利用性のバラン スを取るのは重要 - 速さは正義！！！！