使用React.lazy进行基于路由的代码分割

在构建大型应用时，我们往往会出于性能优化的目的进行代码分割，通常情况下我们会使用webpack进行打包时的bundle split。

我们也可以使用React.lazy进行基于路由的代码分割：

分割前

路由入口：

bundle文件：

分割前有3个路由地址，共加载1个js文件

分割后

修改代码路由入口代码：

使用Suspense包裹Router，并且增加fallback props用于展示路由切换间的加载loading展示

bundle文件：

1.访问order页面：

2.访问index页面：

当然，再继续访问其他页面时，会在路由切换后加载其对应的chunk文件，这样，基于路由的代码分割就完成了，使用路由分割可以对复杂页面的渲染优化提供较为明显的帮助。