React.lazy でお手軽 Code-Splitting

こんにちはフロントエンドエンジニアの山岸和利 (@ykzts) です。お仕事では Ruby を書いていましたが、最近では Perl を書いています。

React.lazy とは

React v16.6 から Code-Splitting のために React.lazy という API が追加されました。これまでも import() を使った Code-Splitting は可能でしたが、公式の API が追加されたことによって平易な記述ができるようになります。

React.lazy を活用することによって必要になるまでスクリプトファイルの読み込みが遅延されるため、ページの初期読み込み速度の改善が期待されます。

HTTP/1.1 では同一のホストから行える同時にできるリクエスト数が制限されていました。そのため webpack や Browserify のようなバンドラーツールを用いてスクリプトファイルは一つのファイルに結合することによって速度改善が見込めていました。

しかし HTTP/2 ではリクエストとレスポンスのストリームが多重化されていて並列して複数のリクエストが送れるようになりました。そのため不必要なスクリプトファイルの読み込みを遅らせることが速度改善のためには大事になってきます。

コード例

./src/Viewer.jsx

import React from 'react'
import Three from 'three'

export default class Viewer extends React.Component {
  /* ... */

  render() {
    return <canvas ref={this.canvasRef} />
  }
}

./src/App.jsx

import React, { Suspense, lazy } from 'react'

const Viewer = lazy(() => import('./Viewer'))

export default class App extends React.Component {
  /* ... */

  render() {
    <Suspense fallback={<div>Loading...</div>}>
      <Viewer />
    </Suspense>
  }
}

Code-Splitting は three.js のような使う箇所が限られているもののコード量が多いライブラリを使う場合に活きてきます。three.js を使う場合、ほかのリソースも読み込むかと思います。なので React コンポーネントの読み込みが多少遅れてもユーザに対しての違和感は少なくなるでしょう。

最後に

この記事は 2016 年に書かれた拙記事である import()を使ったHTTP/2時代のフロントエンド実装の焼き直しです。2 年の間に HTTP/2 を使うウェブページの数もより増えました。React 本体にも Code-Splitting を強く意識した API が追加され、import() の活用事例も増えていくのではないでしょうか。

というわけでこちら DeNA Advent Calendar 2018 の 23 日目の記事でした。