EMP微前端实战之教你如何搭建共享站

转自团队掘金原文:https://juejin.cn/post/6896643727541370888

本文将讲解共享站是什么,共享站的作用,以及怎么划分共享站等问题,来进一步让大家深入理解EMP微前端方案,更好的搭建属于自己的微前端生态。查看关于EMP微前端方案的知识可以点击这里

什么是共享站

《什么是微前端》一文中,我们已经了解到emp微前端是去中心模式的微前端,其核心就是每个应用都可以独立部署彼此分享资源。但多个应用项目之间把可能有某业务逻辑模块或者其他是可复用的资源直接共享出去的话,会带来以下几个问题:

  • 共用模块稳定性差 多个应用项目间的共享资源很容易因应用的更新迭代以及应用的上下线而影响公共模块的稳定性,从而引起多米勒效应。

  • 共用资源混乱,难以管理 多应用共享资源代表我们所有用emp微前端的项目都可以抽离且把资源共享出去,这就意味着我们所有人都不清楚哪些项目共享了哪些资源,容易造成资源浪费,以及重复造轮的局面。

针对这些问题,我们借鉴npm包的管理方式把共用的模块统一,做成只提供共用资源不涉及任何应用的站点,我们把它称作共享站

基础共享站

我们把不涉及任何业务逻辑,且高度可复用的资源按照功能、作用抽离组成的共享站,我们把其称作基础共享站

以我们的antd后台框架为例,我们的项目架构一般如下:

|--src
  |--components // 框架公共组件
  |--configs // 配置项
  |--helpers // 公共方法
  |--pages // 页面
  |--stores // 状态管理store层
  |--assets //静态资源
  |--types // typescript类型文件
  ....

其中框架公共组件(components),公共方法(helpers)以及状态管理(store)是复用性比较高的,因此我们把其分别做成基础共享站:

  • emp-lib基础共享站:提供http、query、login等不依赖框架的公共方法

  • emp-antd-components:提供如layout、router等基于antd框架的公共组件

  • emp-stores:提供用户状态,配置状态等状态管理方法

业务共享站

适用于每个站点有各自独立功能且独立部署的项目,我们把项目的公共业务资源抽组成独立的共享站,我们把其称作业务共享站

  • 什么时候需要业务共享站?

    1.需要部署2个或者以上的子站点 2.站点间在功能、风格、业务流程等有一定的差异化 3.站点拥有各自的业务逻辑

  • 业务共享站可共享哪些资源

    一般来说业务共享站可以共享包括pages,components,stores,assets等项目中所有资源给子站引用,所以在构建业务共享站时,共享资源的复用性,可扩展性以及独立性都需要考虑在内

基础共享站、业务共享站、业务间关系

共享站关系

共享站优点

提供稳定的共享资源

每个共享站都是独立部署的,都有自己的连续交付通道,该通道可以构建、通过测试并其一直部署到生产环境中,这样既保障了线上其他项目调用的稳定性,同时减少了资源部署的范围,从而降低了相关风险。同时如有需要我们可以引入版本机制,在共享站不断更新迭代的同时,减少新迭代对旧项目的影响。

共享资源功能分工更明确

我们根据功能去拆分,把每个模块都归纳到对应的共享站管理,既避免了项目间杂乱无章的资源共享,也避免了资源无处可查的尴尬局面。共享站的构建,让我们的项目得到了积累于沉淀,使整个团队的协作更加高效以及规范化,开发效率得到很大的提升

大部分共享资源抽离,项目更简介纯粹

大部分共享的资源都在共享站管理,项目只需在需要时调用,既大量减少了项目的代码使项目更加关注于业务的逻辑,同时也大大减少了构建打包的耗时。下图可以看出,共享资源的抽离后,原项目的构建得到质的飞跃: 共享资源抽离对比

项目可快速复制、移植、发布

业务共享站的构建使得业务功能模块拆分更加清晰,通过新站点调用装载,能快速的构建出一个全新独立的子站项目。

最后

EMP微前端方案目前已经应用到我司内部80%大型线上项目,都带来了显著的收益,在实践的锤炼过程中,沉淀了完整的脚手架和插件等生态系统,更是总结了一些实战的技巧教程供大家一起学习和探究。

EMP微前端方案的教程目录如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值