react-loadable 使用高阶组件动态import组件，实现代码分割（code-splitting）

 

使用后：

 

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;

import React, { Component } from 'react';

class Bar extends Component {
  render() {
    return (
      <div>
        bar
      </div>
    );
  }
}

export default Bar;

使用前：

 

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

class App extends Component {
  render() {
    return (
      <div>
        <Bar/>
      </div>
    );
  }
}

export default App;

官方github：https://github.com/jamiebuilds/react-loadable

官方npm：https://www.npmjs.com/package/react-loadable