如何用lazy+ Suspense实现组件延迟加载？

我们正常引用一个组件，可以采用 ESM 的 import 语法

import OtherComponent from './OtherComponent';

如果希望能够延迟加载 OtherComponent 组件，我们可以使用 React.lazy 来加载这个组件

const OtherComponent = React.lazy(() => import('./OtherComponent'));

前面给大家讲解了 React.lazy 的用，接下来我们讲讲 Suspense 组件，Suspense 组件是配合 React.lazy 一起使用的

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <OtherComponent />
            </Suspense>
        </div>
    );
}

路由中加载组件

import React, { Suspense } from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

import Home from './Home';

// 延迟加载路由下的 Business 和 Management 组件
const Business = React.lazy(() => import('./Business'));
const Management = React.lazy(() => import('./Management'));

export default function BasicExample() {
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <Link to="/home">Home</Link>
                    </li>
                    <li>
                        <Link to="/business">Business</Link>
                    </li>
                    <li>
                        <Link to="/manage">Management</Link>
                    </li>
                </ul>

                <hr />
                <Suspense fallback={<div>Loading...</div>}>
                    <Switch>
                        <Route exact path="/home">
                            <Home />
                        </Route>
                        <Route path="/business">
                            <Business />
                        </Route>
                        <Route path="/manage">
                            <Management />
                        </Route>
                    </Switch>
                </Suspense>
            </div>
        </Router>
    );
}

xmind 图