react-router4 cooperates with webpack require.ensure to implement asynchronous loading (detailed tutorial)

This article mainly introduces the example of react-router4 with webpack require.ensure to achieve asynchronous loading. It is of great practical value. Friends in need can refer to the

method to achieve asynchronous loading. In the final analysis, most of them are based on Webpack's require.ensure is implemented

The first is to use require.ensure to implement it,

The second is to use loader to implement

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.

The following requires a 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;
  }
}

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 for adding routing:

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

and the chunkFilename for configuring the output

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

After the chunkFilename is configured, the name of the file loaded asynchronously will be as follows The above naming method shows that if it is not configured, it will be 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 above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to implement the waterfall flow plug-in using JS

How to implement the function of converting html to pdf in JS

How to implement the pasteboard copy function using JS

How to implement offset and uniform animation in JS

How to implement table merge cells in Bootstrap

How to implement obtaining the first value in the select drop-down box in JavaScript

In AngularJS How to get and display the password in real time

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