React-router4 は webpack require.ensure と連携して非同期読み込みを実現します (詳細なチュートリアル)

この記事では主に、非同期読み込みを実現するための webpack require.ensure を使用した React-router4 の例を紹介します。最終的には、そのほとんどが

メソッドを参照してください。 Webpack の require.ensure の実装について

1 つ目は、 require.ensure を自分で使用することです

2 つ目は、ローダーを使用して実装することです

今日は、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を使ったウォーターフォールフロープラグインの実装方法

JSでhtml→pdf変換機能を実装する方法

JSを使ったペーストボードコピー機能の実装方法

JSで実装する方法オフセットと均一アニメーションを実装する

Bootstrapでテーブル結合セルを実装する方法

JavaScriptで選択ドロップダウンボックスの最初の値を取得する方法

方法AngularJS パスワードをリアルタイムで取得して表示します

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