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;

巴特西

react 使用 react-loadable分包

使用

loadable.js

loading.js

最新文章

热门文章