微前端的起源
微前端的概念最早由 thoughtworks 在 2016 年提出。其核心思路是借鉴后端微服务架构理念，将一个单体的庞大的前端应用拆分为多个简单独立的前端工程。每个前端工程可以独立开发、测试、部署。最终再由一个容器应用，将拆分后的微前端工程组合为一个整体，面向用户提供服务。
微前端的架构方式所带来的好处也是显而易见的：
- 降低代码耦合
- 微前端可独立部署
- 团队可以按照业务垂直拆分更高效
常见的实现方式
微前端的概念最近一两年很火。但必须指出的是，微前端并不是一门新技术，而是一种新的架构方式。社区开发者们充分发挥聪明才智，提供了不少实现思路。
iframe
对于前端同学来讲，最容易想到的就是 iframe 了。iframe 天然具备微前端的基因。我们只需将单体的前端应用，按照业务模块进行拆分，分别部署。最后通过 iframe 进行动态加载即可。 一个简单的实现如下：
<html> <head> <title>微前端-ifame</title> </head> <body> <h1>我是容器</h1> <iframe id="mfeLoader"></iframe> <script type="text/javascript"> const routes = { '/': 'https://app.com/index.html', '/app1': 'https://app1.com/index.html', '/app2': 'https://app2.com/index.html', }; const iframe = document.querySelector('#mfeLoader'); iframe.src = routes[window.location.pathname]; </script> </body> </html>
优点
- 实现简单
- 天然具备隔离性
缺点
- 主页面和 iframe 共享最大允许的 HTTP 链接数。
- iframe 阻塞主页面加载。
- 浏览器的后退按钮无效
服务端模板组合
有年代感的前端程序员对这种方式一定不陌生。常见的实现方式是，服务端根据路由动态渲染特定页面的模板文件。架构图如下：
容器模板代码如下：
<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>微前端-服务端模板</title> </head> <body> <h1>容器应用</h1> <!--# include file="$PAGE.html" --> </body> </html>
通过 Nginx 服务器根据 url 路径动态设置要加载的模板：
server { listen 8080; server_name localhost; root /usr/share/nginx/html; index index.html; ssi on; rewrite ^/$ http://localhost:8080/app redirect; location /app { set $PAGE 'app'; } location /app1 { set $PAGE 'app1'; } location /app2 { set $PAGE 'app2'; } error_page 404 /index.html; }
优点
- 实现简单
- 技术栈独立
缺点
- 需要额外配置 Nginx
- 前后端分离不彻底
