微前端技术方案

问题

实现微前端有哪些技术方案？

解答

微前端的核心思想是将应用进行拆解和整合，通常由一个父应用加上多个子应用组成。以下是四种主流实现方案：

Nginx 路由转发

通过 Nginx 配置反向代理实现不同路径映射到不同应用。

# nginx.conf
location /app1 {
    proxy_pass http://app1.example.com;
}

location /app2 {
    proxy_pass http://app2.example.com;
}

优点：简单、快速、易配置

缺点：切换应用时会触发浏览器刷新，影响用户体验

iframe 嵌套

父应用单独是一个页面，每个子应用嵌套一个 iframe，父子通信可采用 postMessage 或 contentWindow 方式。

// 父应用
const iframe = document.getElementById('subApp');
iframe.contentWindow.postMessage({ type: 'data', value: 'hello' }, '*');

// 子应用
window.addEventListener('message', (event) => {
  console.log(event.data);
});

优点：实现简单，子应用之间自带沙箱，天然隔离

缺点：样式显示、兼容性有局限性，用户体验较差

Web Components

每个子应用采用 Web Components 技术编写组件。

class SubApp extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<div>子应用内容</div>';
  }
}

customElements.define('sub-app', SubApp);

优点：每个子应用拥有独立的 script 和 css，可单独部署

缺点：历史系统改造成本高，子应用通信较为复杂

组合式应用路由分发

每个子应用独立构建和部署，运行时由父应用进行路由管理、应用加载、启动、卸载以及通信。这是目前主流的微前端方案（如 qiankun、micro-app）。

优点：纯前端改造，体验良好，可无感知切换，子应用相互隔离

缺点：需要解决样式冲突、变量污染、通信机制等技术问题

关键点

• Nginx 方案适合简单场景，但会刷新页面
• iframe 方案隔离性好但体验受限
• Web Components 需要全新开发模式，改造成本高
• 组合式路由分发是主流方案，需处理样式隔离和 JS 沙箱问题
• 选择方案需权衡改造成本、用户体验和技术复杂度