最近在做公司微前端，整理了一份微前端建立清单，假如你正在考虑是否要做微前端，不妨做个参阅。

  • 需求剖析
  • 技能计划剖析
  • 拆分计划剖析
  • 布置流程剖析

需求剖析

第一步，咱们需求进行需求剖析，以便真实清楚e y ? ) j咱们需求处理的问题B 6 A | 2 +是什么。

例如：

  • 产品要新增一个事务模块
  • 产品要修正项目样式
  • 产品反应项目发动太慢了
  • 产品反应页面跳转改写很不友爱

前两个需求是典型} x G w f 8 M的事务需求，它的中心在于处理公司的事务问题，关于这一类需求，通常技能难度都不大，开发B Z ? / R者只需求依照原型图，编写出对应的页面就能够了。

后两个需求是典型的技能需求，它的中心在于处理技能问题。通常来说，技能需求和用户体会有关，但不会影响项目功用，所以一般产品很少会提技能需求，都是由开发同学主导。

目前许多公司都不太重视技能需求，主要是因为和N – i 8 9 o公司事务无关，不能带来实在可见的收益。其实不然，一些技能需求往往能发生p l Y =巨大的本钱收益，所以咱们在做技% : * W能需求时，「首要需求得到公司的支撑L h z %」。

为什么挑选微前端

处理一个技能需求，有许多种方法，为什么选微前端？

咱们看过微前端的发展史就会明白，它并不是凭空出现的，而是项目在不断发展过程中构成的，处% u r q j r { W T理项目臃肿的技能计划。

一个项目在刚成立时，体量很小，但随A _ D X b &着项目不断做大，或许会出现以下问题：

  • 工程膨胀
  • 分支混乱
  • 代码抵触
  • 打包费事
  • 保护困难

关于这些问题，很难找到一个完美| C C C & b = s R的处理计划，于是就诞生了微前端。

有了微前端之后，咱们能将一个大项目拆分红多个小项目，这样一来，每一个小项目就十分好优化了。在优化了一切的小项目后，咱们再将这些小项目组合起E Z T ` K来，就能构成一个完美的大项目了。

微前端自检清单

在实际项目中，假如遇到以下问题，能够考虑使用微前端：

  • 项目太大，成为了典型的巨石使用，打包很慢。

  • 项目开发者太多，多个同学开发同一套代码，常常出现代码抵触、或修正公共组件引发的 Bug。

  • 项目太老，存在留传模块，为了兼容它，约束了整个C a c 1 o项意图发展。

  • 项目技能栈不一致，使用了多种不同结构，每一G _ q T 1 g –种结构又有多个版本共存的状况。

  • 项目由多个团队协r 7 B @ C V # 9同开发，一个功用m k b X a 7 6 ; s需求等其他团队开发好之后，才干接着开发。

  • 项目每次发布都是全量发布，即使是上线一个小模块，也或许导致整个项目挂掉。

  • 项目由多个体系组成，完结一个功用需求不断地跳转多n 0 ; Q R个体系页。

  • 项目开发人员流动[ g @ = A a j z大，存2 q 4 W 1 ; ?在一些祖传代码难以保护，一般人都不好改Z Z T N j P [。

  • 项目需求一些试验田计划，即& p T / u N需求在j Z 5某些模块做一些新技能尝试、结构晋级等。

  • …

除此之外，还有许多实际状况没有列举结束，不过没联系，只要咱们明白了微前端的特色，就能判断任何状况。

微前端特色

微前端的中心是处理巨石使用，它都有这些特色：

  • 简略、松耦合的代码库

    • 微前端架构倾向于编写和保h & M f j护更小、更简略、更简V o = ( } P V M单开发的项目。
    • 技能栈无关，各项目能够使用不同的技能栈。

  • 增量晋级

    • 支撑渐进式重构，先让新旧代码调和共存，再逐步转化旧代码，直到整个重构完结。

  • 独立布置

    • 每] y Y V } D j一个子使用都具备独立开发，继续布置，独立运转的能力。z } L X

  • 团队自治

    • 各子项目之间不存在依靠联系，坚持阻隔。
    • 单一职责，每个子项目只做和自己* / b 9 9 A 相@ a T关的事务工作。

❝

除此之外，微前端供给了一套新的生态体系。它经过拆分小项目，发生了许多的微使用。试想一下，假如大家都将微使用上传到N * t { :云，那么就会构建一个十分强大的微使用云生态。咱们在今后做需求时，也许便是挑选各种适合的微使C 0 S用，然后拼接起来， q i 9 j就完g x m 1事了。

对此坚持期待。

❞

微前端的缺陷

当然，微前端也不是全能的，它也存在以下问题：

  • 拆分的粒度越小，便意味着架构变得杂o x =乱、保护本钱变高。
  • 技能栈一旦多样化，便H 2 , & } x # o意味着技能栈混乱。
  • 办理版本杂乱、依靠杂乱。
  • 开发体会不太友爱，开发时或许需求一起发动多个项目。

这些问题大多是因为项目拆分红多个项目之后，引发的沟通协作问题。

技能计划调研

第二步，咱们需求确定详细的微前端完结方法。

完结微前端有许多种方法：

  • 路由分发式

    • 经过 http 服务器的反向署理功用，来将请求路由到对应的使用上。
    • 这种方法仅仅在路由层面看起来是一个项目，但实际上仅仅经过 a 标签连接了多个项目。
  • 前端容器化

    • 使用 iframp [ ? y t ) Ce 作为容器。
    • seo 不友爱。
    • 需求考虑同源战略 cookie 办理。
    • 需求自建一套使用办理、使用通讯机制。
    • 弹窗不友爱。
    • 浏览器撤退按钮不友爱。
  • 前端微服务化

    • 在不同的结构之S w { 4上设计通讯、加载机制，以在一个页面内加载对应的使用。
    • 常用的结构：qiankun，single-spa 都是这样做的。
    • 最常用的计划，适合于快速上手。
  • 微件化

    • 打包出能够直接嵌入在页面上运转的代码，或许是一段 js，使用时直接引入即可。
    • 需求完结一套微件办理机制，本钱太高。
  • 微使用化

    • 经过软件工程2 S ] X的方法，在布置构建环境中经过 webpack 打包，组合多个独立使用成一个单体使用。
    • 需求将多个项目打包成一个，所以技能栈需求坚持一致。
  • 使用组件化

    • 将子项目都打包成 webComponent，在主项目中组合。
    • 需求考虑 wq u @ L X iebComponent 兼容性。

下图是各种计划的优缺陷： c _ H

微前端自检清单

这么多计划，各有利弊，咱们应该怎样挑选呢？

  • 假如仅仅想简F @ |略快速的做别离，不考虑 se$ ; K So，能够用 iframe。

  • 假如想做别离的一起，坚持良好的单页体会，能够考虑 single-spa、qiankun 结构。

  • 假如公司有很强的技能能力，再考虑自研或其他计划。

有了技能计划! ^ 7 s o h – , l之后，微前端这条路就能够走通了，除此之外，还需考虑过渡计划。

过渡计划

过渡计划指的是怎样让微前端滑C ~ I v !润上线。试想一下，假如在微前端改造时x Y G O m : `，项目来了新需求，这时应该怎样办？

关于这个问题，建议在做微前端改造时，最好快速上线：

  1. 首要将整n O [ c v 0 F g `个原项目当成一个大的子项目，进行微前端改造。
  2. 主项目快速建立好路由、子使用办理，然后立即上线。

    1. 路由办理在处理子项目时，假如是原页面，先经过 a 标签跳转，假如是新页面，则使用前端 rc ^ M & .outer 操控跳转。
    2. 后续逐步拆分子项目，假如有新的子项目拆分0 * ! ~ 0结束，只需求将 a 标签跳转改为前端 router 操控即可。
  3. 做完前两步之后，咱们的架构就现已变成了微前端架构。3 ] ] m V

拆分计划调` k + ] l [ I研

第三步，咱们需求想想，咱们要怎样拆分咱们的项目呢？

常见的拆分计划如下：

  • 依照事务拆分

    • 如：一个电商后台，包括商品办理、商家办理、物流办理等。
    • 独立C _ 5 ( . :出每个事务项目，能够让整个项目结构明晰。
  • 依照权限拆分

    • 如：一个运营后台，办{ a M [ n c理员和普通B T N N R l s L I运@ } @ 2 + 2营看到的页面是不一样的。
    • 独立出` 3 D ! e # o A H不同的权限项目，能够杰出每个项意图使用范围。
  • 依照改变的频率拆分

    • 如：一个项目中，包括很少改动的祖传项目和常常改动的事务项目。
    • 独立出改变频频的项目，能够避免频频更新或许导致全体项目挂掉的危险。
    • 独立出很少改动的项目，能够让咱们在中心事务上大展拳脚。
  • 依照组织结构拆分

    • 如9 V e p (：一个功用杂乱的项目后台，由@ – B _ } C i多个团队共同开发而成。
    • 独立出不同团队的项目，能够避免开发抵触，布置抵触等问题。
  • 跟随后端微服务拆分

    • 如：后端现已做了不同模块的微服务区分，前端能够直接依照后端来就行了。
    • 这种方法有利于前后端坚持一致。

到了这儿，咱们现已完结了微前端的拆分，但并不是拆完了就结束了，咱们还考虑一些拆分后的问题。

例如：

  • 主项目和子项意图样式是否需求复用？
  • 项目权限，是分开仍是在一致办理？
  • 使用之间怎样进行通讯？

这些问题往往和事务相关，咱们在改造时自行判断即可。

布置流程检查

终究一步，咱们需求考虑布置流程。

当微前端开发完结之后，咱们的项目由 1 个变b K K n ] T成了 1 + n(子项目) 个，布置T ` . O B方法势必会发生变O & | ^化。

传统的布置方法如下：

微前端自检清单

微前端项目布置方法如下：

微前端自检清单

能够看到，项目终究的结构现已彻底不同了，开发，测验，布置的流? s 5 ] U a , r程也都需求进行变化。

  • 开发环境的布置
  • 测验环境的布置
  • 线上环境的布置

开发环境的布置

开发环境其实不E v R 6 ) F需求布置，通常是前端发动一个 localhost 页面，去调后端的接口进行开发。

需求注意的是：

  • 子项目需支撑独立发动，而不是在开发时发动一切项目，只需发动与事务相~ 7 I q关的子项目即可。
  • 子项目需支撑独立布置，开发完结之后，只需求布置与事务相关的子项目即可。

测验环境的布置

测验环境布置变化z ) ( J Z挺大的，而且涉及到了跨部门沟通，所以应该谨慎对待。

曾经测验布置流程是：前端只需求供给一个打包文件，测验将文件解压后，放入指定的静态资源目录即可。

微前端之后的布置流程：前端需求供给主项目和相关子项意图打包文件，测验需求别离发布多个项目，才干进行测验。

这样改动之后，测验的工作量变大了，关于手动布置的测验来说，确实有很大的影响。为了减少测验的工作量，咱们能够协助测验来建立一套自动化布置工具。

许多大厂都有自己内部的云服务渠道，就像阿里云的 k8s 操控台一样，测验能够在操控台上挑选需求布置的前端、后端的分支，然后点击一键布置，就搞定了。

上线环境布置

关于线上环境来说，运转的是 1 个主项目和 n 个子项目，每个项目都是独立布置且彼此独立的，十R 5 j : ` B分适合容d / Q { C % 0器化布置，即i n / . N：每一个项目都被布置到一个 docker 中，彼此经过主项目进行相关。

如图，一切的子d $ N ~项目都交由主项目办理。

微前端自检清单

假如公司内部做了继续布置，布置就会愈加简略。

微前端自检清单

思考与总结

本文从需求剖析开端，一步一步理清了微前端需求注意的各种问题，以及一些处理a . – d m 2 o计划，期望能对微前端感兴趣的你有所收获。

其实，微前端没有想象中的那么难，假如是用1 , D 5 P 2 w qiankun、single-spC @ Wa 等现成结构，学习本钱都十分低，关键是要真实着手去做，只要开了头，后边的问题也就不是什么问题了。

终究，假如你对此有任何主意y 4 M p，欢迎留言谈论！

微前端自检清单