网易严选企业级微前端解决方案与落地实践

网易技术热爱者

于 2020-11-25 10:47:43 发布

阅读量1.3k

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_47390782/article/details/109747909

版权

本文详细介绍了网易严选在微前端领域的实践，包括建设背景、微前端架构的关键技术和实际价值。文章指出，微前端解决了技术栈迭代、巨石应用维护、新前端复用模式和跨团队合作的难题。通过实施微前端，网易严选实现了应用的独立开发、部署和运行，提高了模块复用和开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

本文作者：张浩（网易严选技术团队）

张浩，网易资深前端开发工程师，严选数据产品前端负责人。先后负责过网易企业邮箱、网易有钱、网易严选等大型项目的前端架构设计及开发。当前致力于大前端与通用能力建设、工程化与效率工具、企业级应用架构等领域研究。

微前端架构是一种设计方法，其中，前端应用被分解为多个松散而协同工作的半独立“微应用”。微前端的思想来源于微服务，其名称也遵循了微服务的命名方式。那么，微前端到底如何落地呢？来自网易严选的资深前端开发工程师张浩为大家解读了网易严选企业级微前端的解决方案与落地实践。

前言

“微前端”这个词大家应该并不陌生，甚至可以说近期在前端技术领域算是一个热门的话题，目前市面上不乏各种微前端的文章与技术方案。

传统的前端 SPA 开发模式，一方面，随着系统迭代，发展到一定程度，规模已经非常庞大。通过项目内的模块化，已经无法解决业务膨胀的问题；另一方面，随着应用框架的升级、变迁，多框架多版本、同框架多版本共存的状态无法避免，必须要有一种方案，能对整个业务进行合理拆分、组合，所以微前端的思想应运而生。

而这之中的痛点，以及大家的目标显然都是一致的。简而言之，我们希望 项目分离，运营聚合。

在网易严选，微前端不仅仅是一个框架或者说一个“壳”，而是一整套包括规范、工具、框架、配置中心、应用监控等一系列相关功能在内的前端应用架构体系。当然，不同的企业有不同的需求和应用场景，我们可以针对性地做一些个性化开发和改造，从而真真正正地在业务场景中提高生产力。

如下是网易严选微前端的总体架构图：

一、网易严选微前端的建设背景

挑重点来说，有以下几点切实而紧迫的实际需求。

1. 技术栈的迭代与升级

严选发展至今，内部的技术栈颇多。就当前来说，NEJ 等内部技术栈 /Jquery/AngularJs/ Angular 2.x，4.x，6.x/React 0.x，15.x，16.x/Vue 1.x，2.x，可以说一应俱全。随着技术的发展，我们也必然会持续不断地迭代我们的技术体系，同时也要兼容老的项目运行。

2. 巨石应用的维护困难

严选内部有非常多的项目经过多年持续不断的迭代，已经变得非常庞大，动辄 300+ 的页面数量让这些系统越来越难以维护，甚至一次编译部署都要耗费非常久的时间。这其实在许多企业级的项目开发中也非常常见，也就是所谓的“巨石应用”。

3. 新的前端复用模式探索

3.1 各系统之间有很多功能需要复用

我们可以通过复制代码去做模块复用，当然这种方式不够高级，而且难以维护。我们还可以通过把功能模块封装成包，然后以发布 npm 包的方式来复用。但其实这种方式，在具体的业务场景开发中也存在诸多问题。

有一个现实案例，严选有个业务功能叫 库存模块，包含 10 来个页面。我们把这个模块整体发布成了一个 npm 包，在多个项目中引用。本来设想是美好的，只需要和 input、select 那样的基础组件去维护就好了。但是，现实击碎了我们的美好想法。这个业务功能模块并不像基础组件一样稳定，一方面，是因为频繁地需求迭代；另一方面，是因为模块过大 bug 变多，导致我们需要频繁修改这个包。所以，每次在开发联调测试阶段都极为繁琐，我们需要不断地在库存模块的项目里调整代码，发布 npm，然后再用到库存模块的各个项目中，逐个更新依赖、构建、部署。这个过程效率低不说，还容易反复和遗漏。

3.2 跨系统流转的工单开发模式探索

比如一个采购工单，如图：