使用React.lazy进行基于路由的代码分割
在构建大型应用时,我们往往会出于性能优化的目的进行代码分割,通常情况下我们会使用webpack
进行打包时的bundle split。
我们也可以使用React.lazy
进行基于路由的代码分割:
分割前
路由入口:
bundle文件:
分割前有3个路由地址,共加载1个js文件
分割后
修改代码路由入口代码:
使用Suspense
包裹Router,并且增加fallback props用于展示路由切换间的加载loading展示
bundle文件:
1.访问order页面:
2.访问index页面:
当然,再继续访问其他页面时,会在路由切换后加载其对应的chunk文件,这样,基于路由的代码分割就完成了,使用路由分割可以对复杂页面的渲染优化提供较为明显的帮助。