ホームページ > 記事 > ウェブフロントエンド > React-router4 は webpack require.ensure と連携して非同期読み込みを実現します

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

小云云オリジナル: 2018-01-19 09:12:421593ブラウズ

この記事では主に、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 &#39;react&#39;;
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: &#39;[name]-[id].[chunkhash:4].bundle.js&#39;

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

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

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

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

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

関連記事