react-loadable 使用高阶组件动态import组件,实现代码分割(code-splitting)

241 阅读1分钟

 

使用后:

 

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:github.com/jamiebuilds…

官方npm:www.npmjs.com/package/rea…