React 动态加载组件

👁 2021-07-17

如何实现 React 路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，提高效率。

1 使用 React.lazy 结合 Suspense 实现

1.通过 lazy() 来动态 import 需要懒加载的组件。
2.Suspense来包裹懒加载的组件进行加载，设置fallback现实加载中效果，此处使用 antd 的 Spin 组件。

import React, { Component, Suspense, lazy } from 'react'
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import './App.css';
import { Spin } from 'antd';
const Login = lazy(() => import('./pages/Login/Login.jsx'));
const Admin = lazy(() => import('./pages/Admin/Admin.jsx'));

export default class App extends Component {
    render() {
        return (
            <div className="app">
                <BrowserRouter>
                <Suspense fallback={<div style={{textAlign: 'center',margin:'200px auto', width: '100%', height: '100%'}}><Spin></Spin></div>}>
                    <Switch> 
                    {/* 只匹配一个路由 */}
                    <Route path="/login" component={Login}></Route>
                    <Route path="/" component={Admin}></Route>
                    </Switch>
                </Suspense>
                </BrowserRouter>
            </div>

        )
    }
}

2 自定义lazyLoad函数进行实现

1.在App.js中引入lazyLoad.js文件

import {lazyLoad} from '../../util/lazyLoad'

2.修改引入路由的方式

const Login = lazyLoad(() => import('./pages/Login/Login.jsx'));

lazyLoad.js 代码如下：

import React from "react";

/**
* 路由分割方法
*/
export function lazyLoad(loadComponent) {
    return class extends React.Component{
        state = {Component:null}
        componentDidMount() {
            loadComponent().then(result => {
                this.setState({Component: result.default})
            })
        }
        render() {
            const {Component} = this.state
            return Component && <Component></Component>
        }
    }
}

3 预获取/预加载模块(prefetch/preload module)

在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 “resource hint(资源提示)”，来告知浏览器：

1.prefetch(预获取)：将来某些导航下可能需要的资源（浏览器会在空闲时间加载资源）
2.preload(预加载)：当前导航下可能需要资源

与 prefetch 指令相比，preload 指令有许多不同之处：

1.preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
2.preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
3.preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。

const Category = lazy(() => import(/*webpackPrefetch:true*/'../../pages/Category/Category'));

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2021/07/17/react-lazy-load/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------