コード分割

ユーザーが使用する前にアプリ全体をダウンロードするのではなく、コード分割によりコードを小さなチャンクに分割し、オンデマンドで読み込むことができます。

このプロジェクトのセットアップは、動的import()を介してコード分割をサポートしています。その提案はステージ4にあります。import()関数のような形式は、モジュール名を引数として取り、モジュールの名前空間オブジェクトを常に解決するPromiseを返します。

例を次に示します。

moduleA.js

const moduleA = 'Hello';

export { moduleA };

App.js

import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}

export default App;

これにより、moduleA.jsとその独自の依存関係はすべて、ユーザーが「読み込み」ボタンをクリックした後にのみ読み込まれる個別のチャンクとして作成されます。作成されるチャンクの詳細については、本番ビルドのセクションを参照してください。

ご希望の場合は、async/await構文でも使用できます。

React Routerを使用する

React Routerを使用している場合は、こちらのチュートリアルをご確認ください。

Reactのドキュメントのコード分割のセクションも確認してください。