请教一个大型项目的前端架构方案

Question

公司现有一套通用数据可视化大屏A。

现在要求为每个客户单独定制一个模块B（客户要什么我们做什么），然后接入到A中去。

最终交付给客户的产品就是 大屏A + 客户自定义模块B

现在有两种思路：

一、将B作为A的模块来开发。

问题是：

1. 一旦客户多了，项目体积会变得巨大。
2. 对于其他客户来说，存在大量无意义模块（客户B自定义的模块对客户C就是多余的）。
3. 如果一个客户要改需求，整个项目都要重新打包。

二：将B作为新项目开发，A和B通过url跳转和传参

问题是：
公共样式、公共组件、公共接口修改一次，岂不是要去每个项目里改一遍。

请问：

有没有什么方案，可以达到类似即插即用的效果
即：为每个客户只加载他定义的模块，发布更新的时候也只更新这个模块就行，同时又能保证公共样式和组件不需要逐一修改？

现产品用的vue技术栈，后台是java

烦请各位大佬指教，不胜感激。

Answer 1

基于vue和webpack不难.

vue支持异步加载组件.即,component里的组件可以是promise返回的.而webpack也支持按需加载,可以将这种异步组件拆分出去.

那么可以这样维护.
建立一个nexus项目,添加一个npm私仓,不同客户的模块发布到私仓;

模块按照统一的接口(指与页面的interface)各自实现,各自迭代.
模块迭代时,按照npm发布模式发布到nexus.
主项目更新该模块版本号,重新install,重新打包发布.

而前端实现就简单了.
主页面加载到之后,识别客户,然后异步加载相应的模块展示.通过component标签的is属性指定对应的组件.

Answer 2

拆开写吧，前端组件（样式很难统一，特别是图表）后端（很难统一数据结构，还得开发一大堆的中间件）。定制化的需求只会让代码越来越臃肿