如何实现单页应用的不同模块，在相互不影响的前提下灵活组装（集成）？

Question

我们在使用vue/react/angular开发一个项目时，通常是分成若干模块，然后用路由去管理url与模块的对应关系。成果物一般是一个静态资源包，里面包含了我们的若干模块。那么问题来了，现在我要做一个新的系统，但是新的系统中有几个模块刚好是之前系统里有的，讲道理我们没必要再重新开发，而是复用之前系统的模块。那么我们该以什么样的方式去复用之前的模块呢？请说明有哪些方式，以及这些方式的适用场景，多谢。

先说说我能想到的方式：
第一种：代码级别复用
就是把每个模块封装成代码级别的组件，然后在新的系统中引入。
这种方式有个问题，就是新旧系统必须同一套技术体系（都得是vue，或者都得是react，或者都得是angular），甚至连基础框架的版本都有要求（原来系统用的1.0版本，后续项目想用之前的组件，也必须用1.0版本）。

第二种：成果物级别复用
就是把每个模块打包成静态资源包（只包含html、css、js），然后在新的系统中部署静态资源服务器，指定一个url来使用。
这种方式在模块组装上非常灵活，相互之间不受技术体系的制约，随着时间的推移，如果有新的技术可以尽情使用。但这种方式下，系统可能不是一个整体，通常需要一个门户的角色来组装不同的组件，而且门户和组件之间应该只能通过iframe来实现集成。那么在涉及门户与组件通信的应用场景中，会很麻烦。

那么我想请教一下各位大神，是否有更酷炫的方式，来满足上述的需求呢？