React-router4 は webpack require.ensure と連携して非同期読み込みを実現します

この記事では主に、react-router4 を webpack require.ensure で使用して非同期読み込みを実現する例を紹介します。必要な方は参考にしていただければ幸いです。

非同期読み込みを実装するメソッドは基本的にwebpackのrequire.ensureに基づいて実装されます

1つ目はrequire.ensureを自分で使うことです

2つ目はloaderを使って実装することです

今日はBundle -loader を使用して実装すると、コードがより洗練されます。

まず、bundle-loader をインストールする必要があります。npm を使用するか、yarn を使用するかは、使用するパッケージ管理によって異なります。

以下に Bundle.js が必要です

import React, { Component } from 'react';
export default class Bundle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mod: null
    };
  }

  componentWillMount() {
    this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({
      mod: null
    });
    props.load(mod => {
      this.setState({
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

次に、bundle.js をインポートし、非同期にする必要があるファイルもインポートしますが、それらを前に追加する必要があります

bundle-loader?lazy&name=[name]!

例:

import Bundle from './components/bundle.js';
import ListComponent from 'bundle-loader?lazy&name=[name]!./file/List.jsx';

ルーティングを追加するための設定は次のとおりです:

<Route path="/list" component={List} />

と出力を設定するためのchunkFilename

chunkFilename: '[name]-[id].[chunkhash:4].bundle.js'

chunkFilenameが設定されると、非同期でロードされたファイルの名前が次のように表示されます。そうでない場合は、Webpack によって生成された番号が設定されます。

上記をすべて設定したら、バンドルを使用します。ルート上に設定されたコンポーネントが List に対応していることがわかります。したがって、List を記述する必要があります:

const List = (props) => (
  <Bundle load={ListComponent}>
    {(List) => <List {...props}/>}
  </Bundle>
);

この時点で、設定は次のようになります。この時点で、サービスをローカルで再起動し、対応するルートをクリックすると、非同期に記録された js が表示されます: List-0.094e.bundle.js

関連する推奨事項:

使用方法の詳細な説明データの非同期読み込みを実装するDataTableプラグイン

JavaScriptのファイル同期と非同期読み込みを実装する方法の説明

JavaScriptによる非同期読み込みの実装方法のまとめ

以上がReact-router4 は webpack require.ensure と連携して非同期読み込みを実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。