réagir-router4 coopère avec webpack require.ensure pour implémenter le chargement asynchrone (tutoriel détaillé)

Cet article présente principalement l'exemple de React-Router4 avec webpack require.ensure pour réaliser un chargement asynchrone. C'est très pratique. Les amis dans le besoin peuvent se référer à

Comment implémenter le chargement asynchrone en dernière analyse. , la plupart d'entre eux sont basés sur require.ensure de Implement webpack

La première consiste à utiliser require.ensure vous-même,

La seconde consiste à utiliser le chargeur pour l'implémenter

Aujourd'hui, nous parlons d'utiliser bundle-loader pour l'implémenter, afin que le code soit plus élégant.

Vous devez d'abord installer bundle-loader. L'utilisation de npm ou de fil dépend de la gestion de paquets que vous utilisez.

Vous avez besoin d'un bundle.js ci-dessous

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

Ensuite, importez bundle.js, et importez également les fichiers qui doivent être asynchrones, mais vous devez ajouter

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

devant

Par exemple :

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

Ce qui suit est la configuration de l'ajout de routage :

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

et le chunkFilename de la configuration de sortie

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

Une fois le chunkFilename configuré, les noms de fichiers chargés de manière asynchrone seront affichés selon la méthode de dénomination ci-dessus. S'ils ne sont pas configurés, ce sera le numéro généré par webpack.

Une fois ce qui précède configuré, il est temps d'utiliser le bundle. Vous voyez que le composant configuré sur la route correspond à List, nous devons donc écrire une liste :

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

Ci-dessus. Je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter le plug-in Waterfall Flow à l'aide de JS

Comment implémenter la fonction de conversion HTML en PDF en JS

Comment implémenter la fonction de copie de carton en utilisant JS

Comment implémenter une animation offset et uniforme en JS

Comment implémenter la fusion de cellules de tableau dans Bootstrap

Comment implémenter l'obtention de la première valeur dans la liste déroulante de sélection en JavaScript

dans AngularJS Comment obtenir et afficher le mot de passe en temps réel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!