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

Question

大家好，我们公司的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问题！

Answer 1

懒加载不可以吗？

Answer 2

可以使用webpack的多入口配置

Answer 3

这一块没有具体研究过 之前用 antd 的时候有一个 使用 babel-plugin-import. 然后其他的话一般用 webpack 吧 参考链接

Answer 4

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

Answer 5

推荐使用微前端框架 qiankun
https://github.com/umijs/qiankun