项目目前用的React Router版本是 V5

原理

  • 利用React.lazy与import()实现了渲染时的动态加载
  • 利用Suspense来处理异步加载资源时页面应该如何显示的问题
  • 利用React.loadable实现组件按需加载

React.lazy

  • 通过lazy()api来动态import需要懒加载的组件
  • import的组件目前只支持export default的形式导出
1
2
3
4
5
6
7
8
9
import { BrowserRouter as Router, Route } from 'react-router-dom';
import {lazy } from 'react';
//懒加载需要写成
const Home = lazy(()=>import（'./Home'）)
return (
  <Router>
    <Route exact path="/" component={Home}/>
  </Router>
)

Suspense

  • Suspense来包裹懒加载的组件进行加载，可以设置fallback现实加载中效果
  • fallback中也可以使用Loading组件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import { BrowserRouter as Router, Route } from 'react-router-dom';
    //引入Suspense从react中
    import React,{lazy, Suspense} from 'react'
    const Home = lazy(()=>import（'./Home'）)
    return (
      <Router>
        <Suspense fallback={<h1>Loading....</h1>}>
          <Route exact path="/" component={Home}/>
        </Suspense>
      </Router>
    )

React.loadable

  • react.loadable以组件级别来分割代码,不仅可以根据路由按需加载，还可以根据组件按需加载
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // 路由懒加载（异步组件）
    import Loadable from 'react-loadable';
    //通用过场组件
    const LoadingComponent = () => {
      return (
        <div>loading</div>
      )
    }
    export default (loader, loading=LoadingComponent) => {
      return Loadable({
        loader,
        loading
      })
    }
     
    //Route中调用
    import { BrowserRouter, Route } from 'react-router-dom'
    const loadable from './loadable';
    const AnyComponent = loadable(() => import('./AnyComponent'))
    const Routes = () => (
      <BrowserRouter>
        <Route path="/home" component={AnyComponent}/>
      </BrowserRouter>
    );
    export default Routes;