React 路由动态加载

最近的项目首页存在多个路由标签，且每个路由页都比较复杂，使用默认的 react-scripts build 打包之后发现所有路由页的 js 被统一打包到了一个 main.js 中，该文件过大，造成首页加载时间过长。因此学习了一下路由的动态加载，本文以做记录。

1. 改进前路由加载

在首页 App.js 中，直接使用 import ... from ... 引入组件，并赋值为 <Route></Route> 标签的 component 属性。该引入方式下，无论用户访问的路径定位到哪个路由，都会在渲染之前加载所有的组件。假设用户只访问了 '/' 页面，并没有继续进入 '/cart' 页，那么原先加载的 Cart 组件就不需要被渲染，那么加载 Cart 组件所消耗的时间与带宽都是一种浪费。

// ...
import Index from './Index'
import Cart from './Cart'
// ...
export default function App () {
  // ....
  return (<BrowserRouter>
      <Route path = '/' exact component = {Index}></Route>
      <Route path = '/cart' component = {Cart}></Route>
  </BrowserRouter>)
}

2. 动态加载的方法

为了实现组件的动态加载，可以使用 import() 的动态加载方法，在需要时再加载某一组件。但是，<Route>标签的 component 属性期待的是一个组件。因此，需要实现一个高阶组件，以动态加载函数为参数，并将加载得到的组件作为结果返回。

// asyncImportComp.js
import React, { useState, useEffect } from 'react'

const asyncImportComponent = function (importComp) {
    function AsyncComponent(props) {
        const [Comp, setComp] = useState(null)
        useEffect(() => {
            async function fetchComponent () {
                try {
                    const { default: importComponent } = await importComp()
                    setComp(() => importComponent)
                } catch (e) {
                    throw new Error('加载组件出错')
                } 
            }
            fetchComponent()
        }, [])
        return (
            Comp ? <Comp {...props} /> : <div>加载中...</div>
        )
    }
    return AsyncComponent
}

export default asyncImportComponent

3. 改进后的路由加载

import asyncImport from './asyncImportComp'

export default function App () {
  // ....
  return (<BrowserRouter>
      <Route path = '/' exact component = {asyncImport(() => import('./Index'))}></Route>
      <Route path = '/cart' component = {asyncImport(() => import('./Cart'))}></Route>
  </BrowserRouter>)
}