Zenn
🍕

（初学者向け）React 超簡単なパフォーマンス改善方法

2023/09/09に公開
React
フロントエンド
#
エンジニア
#
初学者
#
スピード改善
tech

はじめに

直近の業務でwebアプリの表示スピード改善に取り組む機会があったので、
今回は「コード分割（Code Splitting）」について簡単に紹介していこうと思います。

コード分割（Code Splitting）とは

コード分割（Code Splitting）とは、コードをさまざまなバンドルまたはコンポーネントに分割することです。そうすることで、必要に応じて特定のコンポーネントのみを読み込んだり、並列で読み込んだりすることを可能にします。（MDN Web Docs 用語集より引用）

https://developer.mozilla.org/ja/docs/Glossary/Code_splitting

コード分割が必要な理由

SPAでは基本的にアプリケーション内のファイルを1つにバンドルします。このバンドルされたファイルをWebページ内に置くことによって、アプリ全体を一度に読み込みます。

しかし、アプリケーションが大きくなるほどバンドルされたファイルのサイズが大きくなり、バンドルに要する処理時間やファイルを読み込む時間が増えます。すなわち、何も対策を講じないまま開発を続けていると大きなバンドルを作成してしまい、結果としてアプリの読み込みに多くの時間がかかってしまう事態に陥ってしまう可能性があります。

そこで、コード分割（Code Splitting） を利用します。

コード分割を利用した場合、すぐに必要なコード以外は後から読み込ませることができるため初期表示にかかる時間の削減が期待できます。（これを遅延読み込みといいます。）
つまり、バンドルで一度に読み込むデータ量を調整し、初期表示時間の短縮ができるようになります。

どのような部分をコード分割するべきか

初めての場合、どのように分割すればいいか判断が難しいと思うので、
まずは単純に下記のような判断基準を設けるといいと思います。

  • リロード時などに初期表示されるコンポーネント
    → 優先的に読み込む必要がある情報

  • ユーザーが行動することではじめて表示されるコンポーネント
    → 遅延読み込みさせる情報

それでは、コード分割した際の遅延読み込み処理について具体的な実装方法を記載いたします。

React.lazy関数

Reactでは、React.lazy関数を利用することで遅延読み込みをすることができます。
React.lazy関数を使用すると、初めてレンダリングされるまでコンポーネントのコードの読み込みを延期することができます。

ダウンロード/利用方法

下記のようにコーディングするだけで簡単に利用できます。

const ComponentA = React.lazy(() => import('./ComponentA'));

また、<Suspense>コンポーネント内で定義する必要があります。

import React, { Suspense } from 'react';

const ComponentA = React.lazy(() => import('./ComponentA'));

function SampleComponent() {
 return (
   <div>
     <Suspense fallback={<div>Loading...</div>}>
       <ComponentA />
     </Suspense>
   </div>
 );
}

Loadable Components

React.lazy関数以外にも、様々な方法で実装することができます。
例えば、私が現在開発に携わっているサービスでは、
サードパーティーのLoadable Components（公式サイト）を利用しています。

Loadable Componentsのメリットとして主に3つあります。

  1. <Suspense>の利用が任意。
  2. SSRでも利用できる。
  3. import文にpropsを代入できる。

ダウンロード/利用方法

開発環境にて、Loadable Componentsをインストールする。

npm install @loadable/component

yarn add @loadable/component

利用したいコンポーネントでLoadable Componentsをインポートする。

import loadable from '@loadable/component'

const ComponentA = loadable(() => import('./ComponentA'))

const SampleComponent = () => {
  return (
    <div>
      <ComponentA />
    </div>
  );
};

export default SampleComponent;

このようにコーディングするだけで、簡単に特定のコンポーネントを遅延読み込みできます。

最後に

今回は、コード分割（Code Splitting）について記述いたしました。たとえば、ページの初期表示に必要な情報だけを読み込んでおき、情報が展開する度に必要な情報を読み込めば、ページの初期表示時の処理負荷が軽減できます。表示スピードが変わるだけで利用ユーザーの心的負担は大きく変わります。ぜひ、システム開発する際に意識して取り組まれてみてはいかがでしょうか。

Discussion