react.lazy react.suspense实现动态引入组件

前言

React.lazy和Suspense的功能主要是利用了webpack对es6的import动态载入组件，可以自动实现Code Splitting。Code Spliting，即代码分割，能够“懒加载”当前用户所需要的内容，显著提高应用的性能。尽管并没有减少应用整体的代码体积，但可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

React.lazy

React.lazy函数能让你像渲染常规组件一样处理动态引入（的组件）。
使用之前：

import OtherComponent from './OtherComponent';

使用之后：

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

此代码将会在组件首次渲染时，自动导入包含OtherComponent组件的包。

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

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

import React, {
    Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
     
    return (  
         <div>
             <Suspense fallback={
   <div>Loading...</div>}