在React应用中，我们通常是直接将某个模块导入到页面中，这样做导致的结果是打包出来的包体积过大。尤其是在引入了巨大第三库的情况下，会将第三方库也直接打包进去。因此我们需要关注我们的应用中包含的代码，避免因体积过大而导致加载时间过长。
对代码进行分割能够“懒加载”当前所需要的内容，能够提升应用的性能。尽管这样并没有减少应用的整体代码体积，但是可以避免加载当前不需要的代码，在初始加载的时候可以减少所需加载的代码量。
下面，我们分别来介绍下在 React 中实现代码分割的几种方式。
1、import()
import()是webpack提供的用于分割代码的一种方法，该方法的返回结果是Promise，当文件加载完成后会将模块导出给promise.then方法的回调中。
// 使用 import 动态导入模块
import('./math').then((math) => {
console.log(math.add(5, 10))
})
当 Webpack 解析到该语法时，会自动进行代码分割
2、React.lazy+React.Suspense
React.lazy 方法可以让我们动态加载组件，有助于缩减打包后 bundle 的体积，并延迟加载在初次渲染时未用到的组件
const AsyncComponent = React.lazy(() => import('./OtherComponent'));
React.lazy 返回的是一个异步组件 不能单独使用，需要配合 React.Suspense 使用。当这个异步组件的状态是 pending 时显示的是 Suspense 中 fallback 的内容，只有 resolve 时才会显示加载好的组件。如此使得我们可以在使用 lazy 组件时做优雅降级（如在 fallback添加 loading 效果等）。
3、import()+React Loadable
React Loadable 是一个轻量级的代码分割组件，它是一个高阶组件，能让你的应用程序在渲染之前动态的加载任何模块。
4、UmiJS 按需加载
export default {
dynamicImport: {},
}
