React 的未来，Suspense，lazy 异步加载组件[性能优化]

Suspense，lazy 是 React 16.x 的新特性 话不多说让我们开始吧

• 在你的应用中引入代码分割的最佳方式是通过动态 import() 语法。

注意:
动态 import() 语法目前只是一个 ECMAScript (JavaScript) 提案， 而不是正式的语法标准。预计在不远的将来就会被正式接受。

Webpack 解析到该语法时，它会自动地开始进行代码分割。如果你使用 Create React App，该功能已配置好，你能立刻使用
这个特性。Next.js 也已支持该特性而无需再配置。
如果你自己配置 Webpack，你可能要阅读下 Webpack 关于代码分割的指南。你的 Webpack 配置应该类似于此。
当使用 Babel 时，你要确保 Babel 能够解析动态 import 语法而不是将其进行转换。对于这一要求你需要 babel-plugin-syntax-dynamic-import 插件。

React.lazy

注意:
React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。

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

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

function MyComponent() {
   
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

这个函数他返回了一个Promise，需要用函数去调用，而且还是主动抛错的，resolve

• 这样做就完成了组件的异步加载，但是这样做有个问题那就是：
  如果在 Home 渲染完成后，包含 OtherComponent 的模块还没有被加载完成，我们可以使用加载指示器为此组件做优雅降级。这里我们使用 Suspense 组件来解决。

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

function MyComponent