爆速アプリを目指して~コード分割による速度改善~

こんにちは。「旬をすぐに」のサービス開発を担当している大嶋です。

旬をすぐに（以下、旬すぐ）では、お客様のUX向上のため日々改善を行っています。
その一環として、直近ではwebアプリの表示スピード改善に取り組む機会がありました。
必要な技術として「コード分割（Code Splitting）」について調べたので、
今回は、その技術について簡単に紹介していこうと思います。

コード分割（Code Splitting）とは

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

MDN Web Docs 用語集

コード分割が必要な理由

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つあります。

• <Suspense>の利用が任意。
• SSRでも利用できる。
• 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）について記述いたしました。たとえば、ページの初期表示に必要な情報だけを読み込んでおき、情報が展開する度に必要な情報を読み込めば、ページの初期表示時の処理負荷が軽減できます。表示スピードが変わるだけで利用ユーザーの心的負担は大きく変わります。ぜひ、システム開発する際に意識して取り組まれてみてはいかがでしょうか。