后端有微服务，那前端呢？初探微前端的世界( 二 ) _微前端

文章插图

这些都是使用 Microservices 后所能带来的好处，所以假如读者今天需要开发一个非常複查且庞大的平台，这时候不妨可以利用 Microservices 的架构进行开发喔！
Monolithic Architecture(单体式架构)
讲完了 Microservices 后相信读者应该对于这种架构有了初步的认识，与 Microservices 不一样的架构就是 Monolithic Architecture(单体式架构) 。
一般来说我们正常开发都是使用 Monolithic Architecture，在 Monolithic Architecture 的架构中都会把平台中所有内容都包装起来，像下图这样：

文章插图

这种架构不是不好，但假如今天想要拆分或者扩充平台上的 Service 其实都会比较麻烦一些，而且也会怕牵一发而动全身，甚至所有的 Service 背后都会连到同一个 DB，这样极有可能会让 DB connection 同时连线过高导致 request 一直发送失败，所以这也是 Microservices 想要解决的其中一个痛点。
什麽是 Micro Frontends(微前端)？
Micro Frontends 可以想像成前端版的 Microservices，在后端的世界中强调一个又一个 Service 而在前端的世界中则是强调一个又一个的 modules，如何将网页中每一个 module 有效的拆分就是 Micro Frontends 要做的工作。
Micro Frontends 的实现方式
【后端有微服务，那前端呢？初探微前端的世界】接下来要跟读者介绍的是 Micro Frontends 的实现方式，其实 Micro Frontends 有蛮多种实现方式的：
iframe
透过 iframe 的特性让每个被载入的区块页面都可以独立运行，假如需要有数据上的沟通也可以利用 window.postMessage 来完成，但这样做会有非常多的缺点，像是有可能载入同样的代码、UI 难以控制、甚至可能会有潜在的安全风险，所以笔者还是建议读者不要用此方式来进行 Micro Frontends 的实现方式。
Client side 利用 JAVAScript 载入 module
这个方法简单又粗暴，就是利用 JavaScript create 出 script tag 后，接著再用 script tag 去载入相关的 module，最后再将其内容塞进去对应的 div 内，但缺点就是无法使用 SSR，整体写法会像下图这样。

文章插图

Web Components
Web Components 可以说是最多人拿来讨论的 Micro Frontends 的实现方式了，虽然我们在现今的网页架构中可以自由地 import 大佬们写好的组件，但难免都会遇到以下几个问题：

组相依性的问题：需要安装只有该组件才会使用的 library，这会造成整个 node_modules 相当庞大。
Scope 问题：前端为了样式上的变化通常都会有藉由许多的 className 来进行样式上的改动，但有可能因为该组件也有撰写一样的 className 导致很多时候都需要各种 override，长期下来也会是一种项目维护上的负担。
版本相容性问题：只要框架进行大改版，基本上就很容易出现组件无法兼容新版本的状况，这时候只能组件作者升级版本之后才能再次使用，相信这个状况也是许多开发者都会面临到的困境。

因此 Web Components 的出现就是希望可以解决上述的问题，而 Web Components 一共由以下三种元素组成：
Custom elements
自订一个语意化标签来引用 components，并且利用 JavaScript 来建立 custom elements、shadow DOM、html templates 三者之间的关联，这种自定义标签会像这样：。
Shadow DOM
Shadow DOM 简单来说就是在现有的 DOM tree 中产生出一个完全独立于其他元素的 sub DOM tree，藉由此方法就可以让 sub DOM tree 自己独立运作并且不会干扰到其他 DOM tree 上的元素。
HTML templates
利用以及元素产生出具有複用性的 HTML 样板。
感觉上 Web Components 的设计准则就可以当作是 Micro Frontends 的最好的实现方式，透过上述的三种方式就可以产生出一个独立于原本项目而且又不会影响到页面的 modules 。
可是这种开发方式其实不太符合每一种框架的设计理念(可能只有 Angular 体系最适合XD)，而且会让一个 reusable component 开发起来蛮冗长的，所以 Micro Frontends 还是没有被很多前端工程师所重视。
Webpack Module Federation
假设我们今天有 A、B 两个项目，其中 A 项目有组件发现是可以让 B 项目进行複用的，这时候我们会有以下几种作法达到这个需求：