企业微信 web 项目工业级蜕变

作者：chriscai，腾讯 WXG 前端开发工程师

企业微信 web 项目从以前的小而简单的 web 项目，历经五载，蜕变成了平台级的项目。这几年伴随着前端工业化和前端技术变革，本文将介绍我们如何在高速迭代当中，对大型 web 项目进行高效代码管理，架构升级，编译优化等，最后完成工程化的工业级蜕变。

一、背景介绍

企业微信

企业微信是为用户提供企业 IT 管理的产品。目前有两大业务体系：“连接微信”和“效率与办公”。企业微信具体业务涉及非常广泛，主要有几大功能：客户联系、家校沟通、日程、OA、会议等等。企业微信还存多行业（教育、金融、零售等）、多角色（超级管理员、分级管理员、应用负责人、普通成员）等复杂场景，形成了一套极其复杂的系统。

其中 web 涉及的业务最为广泛，整体可以划分为两块业务：

B 端业务，实现企业微信功能：

1. 企业微信 web 管理端（企业管理端 及 服务商管理端、官网等）

2. OA（打卡、审批、汇报 及相关自定义配套系统）

3. 企业微信客户端内置的功能：数十个小程序和数量繁多的 h5 页面

C 端业务， 主要在微信端作为入口跟 B 端用户联动：

1. 复杂的功能，以小程序承载。会议小程序/班级作业小程序/电子工牌小程序等等

2. 运营推广等业务以 H5 承载。

企业微信 Web 项目

企业微信 web 项目是 nodejs 版本 web server 项目，除了小程序外，前端代码和 nodejs 代码会放在同一个仓库里面，所以我们开发人员需要具备全栈开发能力。

如上图，是我们企业微信 web 的全栈图 ，用户端以 liteApp/web/小程序呈现。以 https 或 wss 协议接入 ，接入层进行业务路径和负载均衡计算分发到不同的 web server ，web server 分成两块 ：

1. node server 采用是 nodejs 实现的，由我们前端团队维护。

2. hiweb server 是由 c++实现的，由后台团队维护。

web server 以 RPC 方式调用后台服务。

面临挑战

随着业务不断的迭代和前端技术的变化，项目中包含了各样业务（ 企业微信 web 管理端/独立的 h5 业务/oa 等）和各种技术栈（typescript/vue/jquery/backbone 等）, 如此复杂的项目也给我们带来了不少挑战：

1. 项目代码管理困难

2. 构建速度缓慢

3. 研发效率低下

我们从 2019 年开始关注 Monorepo 代码管理方式、微前端架构、DevOps 等一些列的前端工业化解决方案。结合我们业务特点和研发体系，我们开始了一条不平凡蜕变之路。

蜕变之路

蜕变之路漫漫其修远兮，我们制定了三个方向进行探索和实践：

1. 代码高效管理

引入 Monorepo 思路，将代码仓库模块化管理，统一构建任务；引入微前端架构对大型单页进行功能隔离；增加多种方案提升代码质量的监控

1. 大型项目构建优化

精确识别代码变化，按需构建，提升构建速度

1. Web DevOps 建设

建设持续的 CI/CD 能力，提高研发效率，提升持续交付的能力

二、代码高效管理

随着项目代码的不断增加，引入前端技术和类库越来越多，项目工程越来越难以驾驭。

我们通过重新规划项目目录结构、升级业务技术框架、统一化代码构建、完善代码质量控制等一系列措施，实现代码的高效管理。让项目保留引入新技术的可能性，并让业务代码继续保持高质量迭代。

1.Monorepo 管理

Monorepo(monolithic repository) 是管理项目代码的一个方式，一个项目仓库(repo) 中管理多个模块/包 (project)。

1.1 选择管理方式

在改造方向上，我们调研了两种前端项目的管理方式，分库管理和集中管理进行对比：

分库管理和集中管理各有优劣势，结合企业微信 web 项目特点。多个业务都是互相独立的，这些独立业务大部分会引用公共的业务组件，而且目前我们的项目已经积累了非常多的独立业务。

基于目前的现状和未来规划考虑，我们选择了 Monorepo 的管理方式。

1.2 如何改造

业内的开源项目大多基于 lerna+yarn 进行 Monorepo 管理。我们的基础库管理也是采用相同的方式，但是企业微信 web 项目没有发布 npm 需要，所以我们采用 yarn workspaces 的特性进行项目改造。下图为我们的改造前项目

├── public
|   ├── 3rd_lib
|   ├── lib
|   ├── web-project
|   |    ├── common
|   |    ├── prg1
|   |    ├── prg2
|   ├── assets
|   |    ├── style
|   |    ├── images
├── server
├── node_modul