近期帮一个朋友做的 Vue 网站优化方案

前几天有个朋友找到我，说他们公司的网站产品打开速度不太理想，加载的数据量很大，想优化一下。并且询问我，是不是用微前端会好一些。

分析

我看了一下，大概有几个点：

1. 他们是做自动化运维的，提供多个工具，所有工具都是独立的 Vue 项目
2. 用户一般先登录 dashboard 页面，然后导航到具体的工具页
3. 因为每个工具都独立开发、独立打包，所以每个页面都会用到不同的 app.[hash].js 和 chunk.vendors.[hash].js
4. 于是，用户每次切换工具，都要完整加载一遍公共资源，如 vue 全家桶和 antdv
5. 已经对一些模块做了 lazy-loading

于是我得出一些结论：

1. 首先，因为所有项目的技术栈高度趋同，所以并不需要微前端（微前端的解释在后面）
2. 现在重复加载最多的应该是 vue 全家桶和 antdv，重复加载的原因是没有拆包。适当拆分打包后资源，应该可以大大提高代码复用率，减轻不同项目间的切换成本
3. 同时还应开启 http/2，提高连接复用率

方案

于是我给朋友提出了以下改进方案：

1. 整站启用 http/2
2. 所有项目手动分 chunk
   1. vue 全家桶
   2. antdv
   3. 其它好统计的、全站都在使用的仓库
   4. 其它仓库
3. 统一所有项目的依赖，提交 lock 文件入库
4. 所有项目对公共仓库的引用顺序需保持一致，保证 webpack 打包之后的序号能维持一致
5. 替换页面中的资源位置，指向同一个资源
6. 延长资源缓存时间，提高利用率

下一步

他们需要一些时间来消化和实施这些方案，所以这一次咨询先到这里。

接下来，我可能会建议他们调整支持的浏览器、增加 ESM build。以及使用 npm workspace 创建一个核心项目，把所有工具项目放到一起构建，减少前面的（2）（4）（5）环节。

总结和广告

希望上述方案对大家也有启发和帮助。

顺便帮他们打个广告吧：

OpsAny，云原生场景下的智能化运维平台。我们倡导“以资源为中心”和“以应用为中心”相融合的运维理念，提高运维效率、保障业务连续性。

OpsAny, make ops perfect

---

关于微前端

在一些大公司里，研发团队很多，且彼此隔离，技术栈比较分散，有用 Vue 的、有用 React 的、甚至有用 Angular 的。即使是同样的基础库，也会有不同版本、不同 UI 库的差异。如果各自只做各自的产品，这样协作并不会产生问题。但是，偶尔大家也需要共同维护一个产品，比如在首页上，分别给 V 团队和 R 团队各留一处空间嵌入自己的产品，就很难复用之前的技术栈。

于是就有人提出“微前端”的概念，类似于微服务，把一个大产品拆成若干个小规模的组件，这样就可以自由组合。

但是微前端目前还处于非常早期的阶段，有人讨论有人尝试，可是真正行之有效性价比很高的方案还没有出现。所以大家可以学可以试着做，但不要寄望太高。