react系列学习（六）——react.lazy懒加载的基本使用

当react项目非常庞大的时候，会导致打包文件build.js文件也特别复杂，庞大，从而导致首页加载缓慢，影响用户体验。所以我们希望有些比较大的组件，只在此组件被加载时，内部资源才被引用。这就是代码分割，也就是react.lazy的作用。

import React, { Component, Suspense, lazy } from 'react';
//懒加载组件
const ReduxComp = lazy(() => import('./Comp/Account'));
const ReactReduxComp = lazy(() => import('./Comp/AccountRedux'));
const TopicsComp = lazy(() => import('./Comp/Topics'));

<Suspense fallback={<div>Loading...</div>}>
    <Switch> 
       <Route path='/redux' component={ReduxComp}></Route>
       <Route path='/reduxRedux' component={ReactReduxComp}></Route>
       <Route path='/topics' component={TopicsComp}></Route>
       <Redirect to="/redux" from='/' exact /> 
    </Switch>
</Suspense>

lazy接收一个函数，返回promise,该 Promise 需要 resolve 一个 default export 的 React 组件。 

然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等。

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

————摘自官网