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

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

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

分割前

路由入口:

分割前路由入口

bundle文件:

bundle文件

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


分割后

修改代码路由入口代码:

修改代码路由入口代码
使用Suspense包裹Router,并且增加fallback props用于展示路由切换间的加载loading展示

bundle文件:

1.访问order页面:
order页面

2.访问index页面:
index页面

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


1 + 6 =

求知若飢,虛心若愚。