在React 16.6之前的版本中，要想实现React项目的代码分割和组件的懒加载，需要借助于ES6、Babel和Webpack或Browserify等工具来做代码分割，或者使用Webpack、react-loadable插件来实现组件的懒加载。

现在，从React 16.6版本开始，不需要借助外部工具，就可以实现组件的懒加载，这里要介绍16.6版本中新引入的两个特性：React.lazy() 和 React.Suspense。

React.lazy() 使得创建一个动态import且懒加载的组件非常容易，使得组件真正需要渲染的时候才会被引入。它将一个函数当做参数，这个函数必须返回一个通过import加载组件的Promise对象。下图是示例。

React.Suspense 是一个高阶组件，它用来包裹着由React.lazy() 创建的组件，且可以将多个不同层次级别的React.lazy()组件包裹在一个Suspense组件内。而且，Suspense组件还有一个fallback属性接受一个React元素，用来作为懒加载组件被加载过程中的占位符（比如：loading提示）。示例见下图。

作者在文中，通过一个简单的示例，很清楚地讲解了如何使用React.lazy()和React.Suspense来创建基于React-Router的多路由懒加载组件。代码如下图。

希望这篇文章能够给你启发，让你更好地理解React.lazy() 和React.Suspense，要使用这些新特性，就赶紧将你的React版本更新到16.6吧。