React.lazy を使うと初回表示時のパフォーマンスが落ちた事例の紹介 - コネヒト開発者ブログ

React.lazy を使うと初回表示時のパフォーマンスが落ちた事例の紹介 - コネヒト開発者ブログ

こんにちは！ フロントエンドエンジニアのもりやです。 今回はママリのアプリ内で使われている WebView ...概要を表示 こんにちは！ フロントエンドエンジニアのもりやです。 今回はママリのアプリ内で使われている WebView に React.lazy を導入した結果、初回表示時のパフォーマンスが落ちてしまった事例を紹介します。 React.lazy を入れようと思った動機 ママリでは、アプリ内の一部の画面をA/Bテストしやすくするなどの目的で、リリースが容易な WebView を使っています。 ただ WebView の初回表示が遅いという課題があり、今回パフォーマンス改善に取り組んでいました。 その改善策の1つとして React.lazy を導入して効果を検証してみました。 React.lazy とは 詳しくは公式ドキュメントの コード分割 – React に書かれていますが、ざっくりいうとファイルを分割して遅延読み込みができる機能です。 ママリで使っている WebView は react-router