React中的lazy加载

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天

lazy是React提供的懒加载组件的方法，React.lazy(),使用import()动态导入，必须支持Promise

优点：

1. 减少打包体积，对初次渲染不适用的组件延迟加载
2. 依赖内置组件Suspense，给lazy加上延迟效果，目前仅支持和lazy配合，实现组件等待加载的效果

import Loading from "./loading";

const MainComponent = React.lazy(() => import('./Main'))

class App extends React.Component{
  render() {
    return (
      <React.Suspense fallback={<Loading/>}>
        <div>
          <MainComponent/>
        </div>
      </React.Suspense>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('app')
)

也可以在路由中实现延迟加载的效果

    <Suspense fallback={ <Loading/>}>
        <div>
          <Switch>
            <Route path="/pageRoute" component={lazy(()=>import('./Main')) }></Route>
          </Switch>
        </div>
  </Suspense>