我司现在使用vue3做为新项目的框架，设计了如下的目录：
|--src
|-- assets/
|-- boot/
|-- components/
|-- config/
|-- lib/
|-- projects/
|-- flight/
|-- promotion/
|-- member/
|-- login/
|-- router/
|-- store
|-- App.vue
|-- main.js
简要说明：projects 下的每个目录，都是一个独立的项目，它们共同依赖外部的模块。
现阶段困境
生产环境刚开始使用 vite 默认的打包逻辑，它有一些问题：
- 公共包太大
- 修改一个模块，会使所有文件缓存失效
- 无法使用 webpackChunkName
所以我动手改造了下打包过程，具体思路如下：
- 从入口文件引入的三方包，打包成 vendor
- 路由带有 webpackChunkName 的，分别按名称打包
- 文件多次引用
- 被同一个 project 引用，打包成 [projectName]-share
- 被多个 project 引用，打包成 common
- src 文件夹下的内容打包成 common
这解决开头提到的几个问题，顺便还提了一个 rollup 的 bug issue。
但随着对项目的深入理解，我看到了一些有意思的情况。
首先，projects 下的项目彼此间并无太多交集，甚至可以看着是一个个独立的项目，但它们组成了一个大型单页应用（SPA）。所以，每次打包的时候，都得全量构建一次。可以预见的是，随着代码量的增加，生产环境的打包时间会越拉越长。
其次，虽然我们多数时候只会访问几个页面，但却不得不加载一堆不相关的依赖。这减缓了首屏的渲染时间，影响用户体验。
新架构设想
第一步：生成公共服务包
公共服务包应具有哪些内容？一个原则——内容公用、接口稳定。
具体到我们项目，应包含 vue、vuex、vue-router 源码及相关配置，请求（request）、登录注册（auth）、支付（payment）、全局组件等。将它们打包成一个文件，假设叫 common-service-[hash].js，此文件导出公共接口，通过外链（<script src="common-service-[hash].js">)的方式，供他项目使用。
第二步：每个项目单独构建
每个子项目独立开发、构建，最终发布到同一个静态服务器中。
第三步：路由跳转中加载依赖文件
虽然每个子项目相对独立，但我们依然想要获得单页应用的使用体验。那么就需要在路由跳转前，把对应的项目依赖加载完毕后，再使用 vue-router 进行跳转。
新架构优点
- 减少子项目之间的耦合
- 减少生产环境编译时间
- 加快首页渲染速度
- SPA 般的使用体验
新架构的问题
软件开发没有银弹。新架构至少存在以下问题。
公共服务包中数据变更，如何全量通知子应用，且不影响子应用的缓存
我们通过 script 标签在 .html 中引入公共服务包。所以当公共服务包发生变更，只需替换所有 .html 文件中的内容，然后上传到服务器对应的目录。
子项目内容存在冗余
冗余是肯定有的，但可以根据具体场景优化
子项目如何通信
vuex
如何丝滑的加载子应用依赖
可以通过应用的 manifest.json 获取初始依赖，但这至少会增加一次网络请求。
构建过程变得非常复杂
软件复杂度不会消失，只会转移。
问题是，这值得么？