React-loadable uses high-order components to dynamically import components with code-splitting

After use:

import React, { Component } from 'react';
import Loadable from 'react-loadable';
 
const LoadableBar = Loadable({
  loader: () = > import('./Bar'),
  loading() {
    return <div>Loading...</div>}});class App extends Component {
  render() {
    return (
      <div>
        <LoadableBar/>
      </div>); }}export default App;
Copy the code

import React, { Component } from 'react';

class Bar extends Component {
  render() {
    return (
      <div>
        bar
      </div>); }}export default Bar;
Copy the code

Before use:

import React, { Component } from 'react';
import Bar from './Bar';

class App extends Component {
  render() {
    return (
      <div>
        <Bar/>
      </div>); }}export default App;
Copy the code

Official Github: github.com/jamiebuilds…

The official npm:www.npmjs.com/package/rea…