react-router4 cooperates with webpack require.ensure to achieve asynchronous loading

This article mainly introduces the example of react-router4 combined with webpack require.ensure to achieve asynchronous loading. It is of great practical value. Friends who need it can refer to it. I hope it can help everyone.

The methods to implement asynchronous loading are basically implemented based on webpack's require.ensure.

The first one is to use require.ensure to implement it yourself.

The second implementation using loader

Today we are talking about using bundle-loader to implement it, so that the code is more elegant.

First you need to install bundle-loader. Whether to use npm or yarn depends on what package management you use.

You need a bundle.js below

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

Then introduce bundle.js, and also introduce the files that need to be asynchronous, but you need to Add

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

For example:

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

The following is the configuration of adding routing:

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

and the chunkFilename that configures the output

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

After the chunkFilename is configured, the name of the asynchronously loaded file will be named according to the above naming method Display, if not configured, is the number generated by webpack.

After the above is configured, it’s time to use the bundle. You see that the component configured on the route corresponds to List, so we need to write a List:

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

The configuration is basically completed here. At this time, you restart the service locally, then click on the corresponding route, and you will see the js recorded asynchronously: List-0.094e.bundle.js

Related recommendations:

Detailed explanation of using the DataTable plug-in to implement asynchronous loading of data

Explanation of methods to implement synchronization and asynchronous loading of JavaScript files

How JavaScript solves the problem of asynchronous loading implementation summary

The above is the detailed content of react-router4 cooperates with webpack require.ensure to achieve asynchronous loading. For more information, please follow other related articles on the PHP Chinese website!