réagir-router4 coopère avec webpack require.ensure pour réaliser un chargement asynchrone

Cet article présente principalement l'exemple d'utilisation de React-Router4 avec webpack require.ensure pour réaliser un chargement asynchrone. Il est d'une grande valeur pratique. Les amis qui en ont besoin peuvent s'y référer.

En dernière analyse, la plupart des méthodes pour implémenter le chargement asynchrone sont basées sur require.ensure de webpack

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

La seconde La deuxième méthode consiste à utiliser loader pour 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.

Ce qui suit nécessite un 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;
  }
}

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

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

par exemple :

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

Voici la configuration pour ajouter du routage :

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

et le chunkFilename de sortie configuré

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

Une fois le chunkFilename configuré, il est chargé de manière asynchrone Le nom du fichier sera affiché selon la méthode de dénomination ci-dessus S'il n'est pas configuré, 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>
);

La configuration est essentiellement terminée ici. A ce moment, vous redémarrez le service localement, puis cliquez sur la route correspondante, et vous verrez le js enregistré de manière asynchrone : List-0.094e.bundle.js

Recommandations associées :

Explication détaillée de l'utilisation du plug-in DataTable pour charger des données de manière asynchrone

Explication des méthodes à réaliser synchronisation et chargement asynchrone des fichiers JavaScript

Un résumé de la façon dont JavaScript résout l'implémentation du chargement asynchrone

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!