React 路由动态加载

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

1. 改进前路由加载

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

// ...
import Index from './Index'
import Cart from './Cart'
// ...
export default function App () {
  // ....
  return (
      
      
  )
} 
2. 动态加载的方法

为了实现组件的动态加载,可以使用 import() 的动态加载方法,在需要时再加载某一组件。但是,标签的 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 ?  : 
加载中...
) } return AsyncComponent } export default asyncImportComponent
3. 改进后的路由加载
import asyncImport from './asyncImportComp'

export default function App () {
  // ....
  return (
       import('./Index'))}>
       import('./Cart'))}>
  )
}

你可能感兴趣的:(React 路由动态加载)