React-Router4 arbeitet mit Webpack require.ensure zusammen, um asynchrones Laden zu implementieren (ausführliches Tutorial).

In diesem Artikel wird hauptsächlich das Beispiel von React-Router4 vorgestellt, um asynchrones Laden zu erreichen. Es ist sehr praktisch, wie man asynchrones Laden implementiert , die meisten davon basieren auf der Implementierung von require.ensure des Webpacks

Die erste besteht darin, require.ensure selbst zu verwenden,

Die zweite Möglichkeit besteht darin, den Loader zu verwenden, um es zu implementieren

Heute sprechen wir über die Verwendung des Bundle-Loaders zur Implementierung, damit der Code eleganter wird.

Zuerst müssen Sie den Bundle-Loader installieren. Ob Sie npm oder Yarn verwenden, hängt davon ab, welche Paketverwaltung Sie verwenden.

Das Folgende erfordert eine 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;
  }
}

und anschließend den Import von bundle.js sowie den Import der Dateien, die asynchron sein müssen, aber Sie müssen

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

hinzufügen davor, zum Beispiel:

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

Das Folgende ist die Konfiguration des Hinzufügens von Routing:

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

und der chunkFilename der konfigurierten Ausgabe

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

chunkFilename Nach der Konfiguration Der Name der asynchron geladenen Datei lautet wie folgt: Die obige Benennungsmethode zeigt, dass es sich um die vom Webpack generierte Nummer handelt, wenn sie nicht konfiguriert ist.

Nachdem das Obige konfiguriert ist, ist es Zeit, das Bundle zu verwenden. Sie sehen, dass die auf der Route konfigurierte Komponente der Liste entspricht, also müssen wir eine Liste schreiben:

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

Das Obige ist Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Das obige ist der detaillierte Inhalt vonReact-Router4 arbeitet mit Webpack require.ensure zusammen, um asynchrones Laden zu implementieren (ausführliches Tutorial).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!