React-router4 and webpack to implement asynchronous loading

The method of implementing asynchronous loading is ultimately based on webpack.

The first one is to implement it yourself.

The second method is implemented 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. The specific use of npm or yarn depends on what your package management uses.

One is needed below

import React, { Component } from 'react';
export default class Bundle extends Component {
  constructor(props) {
    super(props);
     = {
      mod: null
    };
  }

  componentWillMount() {
    ();
  }

  componentWillReceiveProps(nextProps) {
    if ( !== ) {
      (nextProps);
    }
  }

  load(props) {
    ({
      mod: null
    });
    (mod => {
      ({
        mod:  ?  : mod
      });
    });
  }

  render() {
    return  ? () : null;
  }
}

Then bring in, and also bring in files that need to be asynchronous, but it needs to be added before

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

for example:

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

The following is the configuration for adding routing:

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

and chunkFilename to configure output

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

After the chunkFilename is configured, the file names loaded asynchronously will be displayed according to the naming method above. If not configured, it will be the number generated by webpack.

After all the above configurations are completed, it is how to use 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>
);

At this point, you will basically complete the configuration. At this time, you restart the service locally and click on the corresponding route and you will see the asynchronous record of js: List-0.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.