14 代码分割之lazy:Suspense与路由懒加载

lazy内置方法 Suspense内置组件

• lazy是React提供的懒（动态）加载组件的方法，React.lazy()

• 能减少打包体积、延迟加载首屏不需要渲染的组件

• 依赖内置组件Suspense：给lazy加上loading指示器组件的一个容器组件

• Suspense目前只和lazy配合实现组件等待加载指示器的功能

• React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。所以要用类返回render而不是函数

• index.jsx

import Loading from './loading'
const MyMain = React.lazy(() => import('./main.jsx'))
function App() {
    return (
        <div>
            {/* 注意 fallback这里是组件 */}
            <React.Suspense fallback={<Loading />}>
                <MyMain />
            </React.Suspense>
        </div>
    )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)

• main.jsx

// export function Main() {
//     return (
//         <div>
//             显示内容
//         </div>
//     )
// }
// React.lazy 接受一个函数，这个函数需要动态调用 import()。
// 它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。
export default class Main extends React.Component {
    render() {
        return (
            <div>
                显示内容
            </div>
        )
    }
}

• Loading.jsx

export default function Loading() {
    return (
        <div>
            <h1>Loading...</h1>
            <h1>Loading...</h1>
            <h1>Loading...</h1>
        </div>
    )
}

路由懒加载

• yarn add react-router react-router-dom
• 本地调试时，path和文件名同名，会变成访问文件
• index.jsx

import Loading from './loading'
import React, { lazy, Suspense } from 'react'
import { BrowserRouter } from 'react-router-dom'
import { Switch, Route } from 'react-router'
const MyMain = lazy(() => import('./main.jsx'))
function App() {
    return (
        <div>
            {/* 注意 fallback这里是组件 */}
            <Suspense fallback={<Loading />}>
                <div>
                    <MyMain />
                    <Switch>
                        <Route path="/mypage1" component={lazy(() => import('./page1.jsx'))} />
                        <Route path="/mypage2" component={lazy(() => import('./page2.jsx'))} />
                    </Switch>
                </div>
            </Suspense>
        </div>
    )
}

// 路由懒加载
ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById('app')
);