when we develop a project using vue/react/angular, we usually divide it into several modules, and then use routing to manage the correspondence between url and modules. The result is generally a static resource package that contains several of our modules. So the problem is, now I want to make a new system, but several modules in the new system happen to be in the previous system, it is reasonable that we do not need to redevelop, but reuse the modules of the previous system. So how should we reuse the previous module? Please indicate what methods are available and where they are applicable. Thank you.

Let"s start with the ways I can think of:
first: code-level reuse
is to encapsulate each module into a code-level component and then introduce it into the new system.
there is a problem with this approach, that is, the old and new systems must have the same technical architecture (both vue, or react, or angular), or even the version of the basic framework is required (the original system uses version 1.0, and subsequent projects must use version 1.0 if they want to use the previous components).

second: artifact-level reuse
is to package each module into a static resource bundle (containing only html, css, and js),), and then deploy a static resource server in the new system, specifying a url to use.
this approach is very flexible in module assembly, independent of the technology system, and can be used as much as possible if new technologies are available over time. But in this way, the system may not be a whole, it usually requires the role of a portal to assemble different components, and the integration between portals and components should only be achieved through iframe. Then it can be troublesome in application scenarios that involve communication between portals and components.

then I would like to ask the gods, is there a cooler way to meet the above needs?