React-Router4 arbeitet mit Webpack require.ensure zusammen, um asynchrones Laden zu erreichen

In diesem Artikel wird hauptsächlich das Beispiel der Verwendung von „react-router4“ mit „require.ensure“ vorgestellt, um ein asynchrones Laden zu erreichen. Freunde, die es benötigen, können sich darauf beziehen.

Letztendlich basieren die meisten Methoden zur Implementierung des asynchronen Ladens auf require.ensure des Webpacks.

Die erste Möglichkeit besteht darin, require.ensure selbst zu verwenden,

Die zweite Methode besteht darin, den Loader zur Implementierung zu verwenden

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;
  }
}

Importieren Sie dann bundle.js und importieren Sie auch die Dateien, die asynchron sein müssen, aber Sie benötigen um

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

hinzuzufügen, zum Beispiel:

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

Das Folgende ist die Konfiguration zum Hinzufügen von Routing:

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

und der konfigurierte Ausgabe-ChunkFilename

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

Nachdem der ChunkFilename konfiguriert wurde, wird er geladen asynchron Der Dateiname wird gemäß der oben genannten Benennungsmethode angezeigt. Wenn er nicht konfiguriert ist, handelt es sich um die vom Webpack generierte Nummer.

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>
);

Die Konfiguration ist hier im Grunde abgeschlossen. Zu diesem Zeitpunkt starten Sie den Dienst lokal neu, klicken dann auf die entsprechende Route und sehen die asynchron aufgezeichneten js: List-0.094e.bundle.js

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung des DataTable-Plug-Ins zur Implementierung des asynchronen Ladens von Daten

Erläuterung der Methoden um die Synchronisierung und das asynchrone Laden von JavaScript-Dateien zu implementieren

Eine Zusammenfassung, wie JavaScript die Implementierung des asynchronen Ladens löst

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