feat: 使用react loadable 做懒加载

Author: Sven

src/components/AsyncComponent.js

@@ -0,0 +1,11 @@
+import Loadable from 'react-loadable'
+import Loading from './Loading'
+
+export default function AsyncLoad(opts) {
+  return Loadable({
+    ...opts,
+    loading: Loading,
+    delay: 200,
+    timeout: 2000,
+  })
+};

src/components/AsyncLoad.js

@@ -17,7 +17,7 @@ export default function Loading(props) {
       return <div>Loader timed out!</div>
     } else if (props.pastDelay) {
       // Display a loading screen after a set delay.
-      return <Spinner name="cube-grid" color="purple" />
+      return <Spinner name="cube-grid" color="purple" style={{ margin: 'auto' }} />
     } else {
       // Don't flash "Loading..." when we don't need to.
       return null

src/components/Loading.js

@@ -2,28 +2,33 @@ import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { Container } from 'reactstrap'
 
-import asyncComponent from 'components/AsyncComponent'
+import AsyncLoad from '../../components/AsyncLoad'
 import Navbar from '../containers/NavbarContainer'
 
 // `import()` 异步加载模块，魔法注释写chunkName
-const AsyncCounter = asyncComponent(() => import(
-  /* webpackChunkName: "counter" */
-  'routes/Counter'))
-const AsyncZen = asyncComponent(() => import(
-  /* webpackChunkName: "zen" */
-  'routes/Zen'))
-const AsyncElapse = asyncComponent(() => import(
-  /* webpackChunkName: "elapse" */
-  'routes/Elapse'))
-const AsyncRoute = asyncComponent(() => import(
-  /* webpackChunkName: "route" */
-  'routes/Route'))
-const AsyncPageNotFound = asyncComponent(() => import(
-  /* webpackChunkName: "pageNotFound" */
-  'routes/PageNotFound'))
-const AsyncHome = asyncComponent(() => import(
-  /* webpackChunkName: "pageNotFound" */
-  'routes/home'))
+export const AsyncCounter = AsyncLoad({
+  loader: () => import(/* webpackChunkName: "counter" */'routes/Counter'),
+})
+
+const AsyncZen = AsyncLoad({
+  loader: () => import(/* webpackChunkName: "zen" */'routes/Zen'),
+})
+
+const AsyncElapse = AsyncLoad({
+  loader: () => import(/* webpackChunkName: "elapse" */'routes/Elapse'),
+})
+
+const AsyncRoute = AsyncLoad({
+  loader: () => import(/* webpackChunkName: "route" */'routes/Route'),
+})
+
+const AsyncPageNotFound = AsyncLoad({
+  loader: () => import(/* webpackChunkName: "pageNotFound" */'routes/PageNotFound'),
+})
+
+export const AsyncHome = AsyncLoad({
+  loader: () => import(/* webpackChunkName: "home" */'routes/Home'),
+})
 
 export default function CustomHome() {
   return (

src/layouts/components/CustomHome.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { func } from 'prop-types'
 import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavLink } from 'reactstrap'
 import { NavLink as Link } from 'react-router-dom'
+import { AsyncCounter } from './CustomHome'
 
 export default class CustomNavbar extends Component {
   static propTypes = {
@@ -23,14 +24,18 @@ export default class CustomNavbar extends Component {
     localStorage.setItem('LoginState', 'false')
   }
 
+  onMouseOver = () => {
+    AsyncCounter.preload()
+  }
+
   render() {
     return (
       <Navbar color="faded" light toggleable>
         <NavbarToggler right onClick={this.toggle} />
         <NavbarBrand exact to="/" tag={Link}>Vortex React</NavbarBrand>
         <Collapse isOpen={this.state.isOpen} navbar>
           <Nav className="ml-auto" navbar>
-            <NavLink to="/counter" tag={Link}>Counter</NavLink>
+            <NavLink to="/counter" tag={Link} onMouseOver={this.onMouseOver}>Counter</NavLink>
             <NavLink to="/zenPage" tag={Link}>Zen</NavLink>
             <NavLink to="/elapse" tag={Link}>Elapse</NavLink>
             <NavLink to="/route/8080" tag={Link}>Route</NavLink>