1. React 懒加载

  1. import React, { Suspense}from 'react'
  2. const Demo = React.lazy(() => import('./Demo'))
  3.  export default function App(){
  4.   <div>
  5.     <Suspense fallback={<div>加载中...</div>}>
  6.       <Demo/>
  7.     </Suspense>
  8.   </div>
  9. }

如上述代码， 通过import()、React.lazy和Suspense共同一起实现了React的懒加载， 也就是我们常说的运行时加载， 即Demo组件文件被拆分为一个新的包（bundle）文件， 并且只会在Demo组件渲染时， 才会被下载到本地。
那么上述的代码时如何拆分的，以及动态加载时如何实现的？

1.1 Import()原理

import（）函数时由TS39提出的一种动态加载模块的规范实现， 其返回一个Promise。当webpack解析到该import()语法时，会自动进行代码分割。
import命令时同步引入模块，而import()是函数动态引入。

1.2 React.lazy

:::success 代码分割：

  • 当Webpack解析到该语法时， 它会自动地开始进行代码风格， 分割成一个文件。当使用到这个文件的时候才会被异步加载；
  • 当你的程序越来越大， 代码量越来越多。 一个页面上堆积了很多功能， 也许有些功能可能都用不到， 就可以使用React.lazy。 ::: React.lazy函数能让你想渲染常规组件一样处理动态引用的组件
    什么意思？ 其实就是懒加载， 其原理就是利用ES6 import（）函数。
    1. const Demo = React.lazy(() => import('./Demo))
    React.lazy接受一个函数， 这个函数需要动态的调用import()，它必须返回一个Promise, 该Promise需要resolve一个default export 的React组件。
    然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。
    在React.lazy和常用的三方react-loadable，都是使用了这个原理。然后配合webpack进行代码打包拆分异步加载。 这样首屏渲染的速度将大大的提高。
    由于React.lazy不支持服务端渲染， 所以这时候使用React-loadable。

    1.3 React.Suspense

    React.Suspense 可以指定加载指示器（loading indicator），以防其组件树中的某些子组件尚未具备渲染条件。目前，懒加载组件是 支持的唯一用例： ```javascript // 该组件是动态加载的 const OtherComponent = React.lazy(() => import(‘./OtherComponent’));

function MyComponent() { return ( // 显示 组件直至 OtherComponent 加载完成 }>

); }

``` 注意： 异步组件必须使用Suspense包裹住， 否则会报错。