react 使用 react-loadable分包

文档

yarn add react-loadable

使用

import Loadable from "@/components/loadable";

const Home = Loadable({
  loader: () => import('./routes/Home'),
});

const About = Loadable({
  loader: () => import('./routes/About'),
});

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </Switch>
  </Router>
);

loadable.js

import L from "react-loadable";
import Loading from "./loading";

const Loadable = props =>
  L({
    loading: Loading,
    delay: 300,
    timeout: 10000,
    ...props,
  });

export default Loadable;

loading.js

import React from 'react'
const Loading = props => {
  if (props.error) {
    return (
      <div>
        Error! <button onClick={props.retry}>Retry</button>
      </div>
    );
  } else if (props.timedOut) {
    return (
      <div>
        Taking a long time... <button onClick={props.retry}>Retry</button>
      </div>
    );
  } else if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
};

export default Loading;