微服务都了解了，微前端呢？来看看微前端的前世今生

---

---

iframe 应该是实现微前端的最简单，最高效的方案。这也不是一个新技术了，老熟人。说起Iframe估计有个吐槽大会才能吐槽完小细节，一些问题我们无法去优化。

如qiankun所举例：

• url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

• UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中…

• 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。

• 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

然后我找了github的 micro-frontends ，顺藤摸到了一堆瓜。

什么是微前端

---

---

“微前端”一词最早于2016年底在ThoughtWorks Technology Radar中提出。它将微服务的概念扩展到了前端世界。当前的趋势是构建一个功能强大且功能强大的浏览器应用程序（也称为单页应用程序），该应用程序位于微服务架构之上。随着时间的流逝，通常由一个单独的团队开发的前端层会不断增长，并且变得更加难以维护。这就是我们所谓的Frontfront Monolith。

简而言之，微前端就是将大而可怕的东西切成更小、更易于管理的部分，然后明确它们之间的依赖关系。我们的技术选择、代码库、团队和发布流程都应该能够独立运行和演变，而不会过度协调。

目的显而易见，和后端微服务、移动端组件化是一样的。

• 解耦合，不同团队开发不同模块

• 增量更新

• 独立部署

• 提高复用

实现微前端的方法

---

---

鉴于上述定义相当松散，有许多方法可以合理地称为微前端。在本节中，我们将展示一些示例，并讨论它们的权衡。所有方法都出现了一个相当自然的架构——通常应用程序中的每个页面都有一个微前端，并且有一个容器应用程序，它：

渲染常见的页面元素，如页眉和页脚

解决身份验证和导航等跨领域问题

将各种微前端聚合到页面上，并告诉每个微前端何时何地呈现自己

一个网页，里面有围绕不同部分绘制的盒子。一个盒子包裹整个页面，将其标记为“容器应用程序”。另一个框包装了主要内容（但不包含全局页面标题和导航），将其标记为“浏览微前端”

1. 服务端模板集成

首先我们写一个index.html 文件，留下中间动态片段由服务端去渲染。

🍽 Feed me

需要借助Nginx去配置$PAGE变量，在请求的时候重新匹配url

server {

listen 8080;

server_name localhost;

root /usr/share/nginx/html;

index index.html;

ssi on;

Redirect / to /browse

rewrite ^/$ http://localhost:8080/browse redirect;

Decide which HTML fragment to insert based on the URL

location /browse {

set $PAGE ‘browse’;

}

location /order {

set $PAGE ‘order’;

}

location /profile {

set $PAGE ‘profile’

}

All locations should render through index.html

error_page 404 /index.html;

}

服务端渲染微服务通过后端分割业务来实现，也是可以分割代码的,针对于ssr模式开发而来。

2. 构建时集成

通过将不同业务进行打包，然后通过一个主应用将不同业务集合起来，类似于下面的package.json:

{

“name”: “@feed-me/container”,

“version”: “1.0.0”,

“description”: “A food delivery web app”,

“dependencies”: {

“@feed-me/browse-restaurants”: “^1.2.3”,

“@feed-me/order-food”: “^4.5.6”,

“@feed-me/user-profile”: “^7.8.9”

}

}

这种虽然实现了分治，不同团队开发不同部分，但是更新依赖过于麻烦，不能增量打包发版。

3. 运行时集成

(1) Iframe

通过iframe 来动态加载，老生常谈，不多赘述，看如下代码：

Welcome to Feed me!

（2）通过JavaScript进行运行时集成

这个方法可能是最灵活的方法，也是我们看到团队最常用的方法。每个微前端都使用

Welcome to Feed me!