react在复杂多页面应用如何组织打包js文件？

Question

最近在尝试用react开发一套复杂的多页面后台程序。除了登录、注册、后台首页这些，当然肯定少不了还有好多页面和功能。之前学习react，只学会了用react-router来做单页面应用的切换。但是这样的话，打包的时候，所有js会打包到一个文件内，比如app.js，然后引入到index.html中。缺点是，如果功能很多，组件很多，这个app.js体积会比较大，用户第一次载入时间较长。
目前，我能想到的一个方法，是如果开发多页面web。
每一个页面当做一个单页开发，然后每一个页面都是一个pagexxx.html搭配一个pagexxx.js。
不知道我这个想法靠谱不，有没有大神有更好的实现方式？
如果采用这种组织文件的方式，我的疑问在于，如何能在带左侧导航的后台首页中，点击左侧导航的时候，把这些页面动态加载到右侧？
我知道我的问题还是比较小白的，希望能有不嫌弃的朋友给予解答，万分感谢。

Answer 1

这个想法似乎不太靠谱

你可以按照功能性划分入口文件，这样就可以打出多个包，对性能提升很大。

一般拆分到1-3个包就足够啦

Answer 2

第三方库打包成一个js，另外的可以用webpack模块切分，react-router配置成按模块懒加载，这样切到那个路由才加载改路由对应的js，这方法解决app.js体积大的问题。

Answer 3

再用webpack打包多页面应用的时候，会遇到一个问题，除了每个页面会用到的公共的库如jquery、React、React-router、vue、vue-router...等等，你还会涉及到每个页面都会用到公共组件，而这些每个入口文件中都有引用这些公共组件的话，是会重复打包的，导致无法使用公共组件，除了公共组件还会有一些公共的css，也是一样，必须每个入口文件下都存一份，不能一起共用一个。所以这个很头痛，如果我项目有几十个入口文件，那我不是有多少个入口文件，就复制多少个公共组件？我也在探索有没有更好的办法