如何分解大型的React应用,可以让指url的组件,提高启动速度?

大家好,我们公司的React应用打包后的bundle.js已经有2M多了,真的挺大了,现在明显感觉有点慢。
我们的产品有几个大的组件是分开的,比如A,B,C,分别对应的www.xxx.com/#A这样的链接地址。

用户会首先进入A界面,然后点击一个产品,进入B界面,C则是一些登陆、设置之类的界面。
现在这些界面都是通过APP引入,然后使用react-route联系起来的。

我们测试发现,如果去掉B和C的router,以及在APP.js的引用。
我们的应用进入A界面的速度会从1600毫秒,提高到1000毫秒。

我们在想,用户进入A时,根本就没有用到B\C的组件内容;同理,进入B\C时,也不需要加载A的组件。那是否有办法可以做到,进入某个特定的url地址时,不要让APP.js代码里去引入不必要的组件?

比如进入#A页面时,app.js就不要去加载B\C组件?
请问这个能做吗?怎么做?

多谢!

PS:这里都暂时不考虑网络加载速度的区别,默认都使用的是缓存在本地的JS文件,没有网络IO问题!

阅读 2.7k
5 个回答

懒加载不可以吗?

可以使用webpack的多入口配置

异步加载路由+拆分chunk即可,未使用到的路由,webpack不会下载他的chunk代码。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题