之前写过一篇 Vue 异步组件的文章，最近在做一个简单项目的时候又想用到 React 异步组件，所以简单地了解了一下使用方法，这里做下笔记。

传统的 React 异步组件基本都靠自己实现，自己写一个专门的 React 组件加载函数作为异步组件的实现工具，通过 import() 动态导入，实现异步加载，可以参考【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）这篇文章。这样做的话还是要自己写一个单独的加载组件，有点麻烦。于是想找个更简单一点的方式，没想到真给找到了：Async React using React Router & Suspense，这篇文章讲述了如何基于 React Router 4 和 React 的新特性快速实现异步组件按需加载。

2018 年 10 月 23 号，React 发布了 v16.6 版本，新版本中有个新特性叫 lazy，通过 lazy 和 Suspense 组件我们就可以实现异步组件，如果你使用的是 React v16.6 以上版本：