ホームページ > 記事 > ウェブフロントエンド > 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> );
上記は私が全員のためにコンパイルしたものです。将来的には誰にとっても役立つことを願っています。
関連記事:
JavaScriptで選択ドロップダウンボックスの最初の値を取得する方法
方法AngularJS パスワードをリアルタイムで取得して表示します
以上がReact-router4 は webpack require.ensure と連携して非同期読み込みを実現します (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。