什么是微前端，以及微前端的域名如何处理

微前端（Micro Frontends）是一种将 前端应用拆分为独立模块 并由不同团队独立开发的架构模式，类似于后端的微服务架构。以下是其核心原理及域名处理的深度解析：

一、微前端核心概念

架构对比

传统单体前端	微前端架构
单仓库、单构建、单部署	多仓库独立开发、独立部署
技术栈必须统一	各子应用可使用不同框架（React/Vue等）
全局状态共享简单	需要设计跨应用通信机制

典型实现方案

graph TB A[主应用] -->|加载| B(子应用A - React) A -->|加载| C(子应用B - Vue) A -->|加载| D(子应用C - Angular)

二、域名处理策略

统一域名方案（推荐）

路由分发 ：通过路径区分不同子应用

arduino 复制代码

https://example.com/app1/*   → 子应用1
https://example.com/app2/*   → 子应用2

实现方式 ：

nginx 复制代码

# Nginx配置
location /app1 {
  proxy_pass http://app1-service;
  rewrite ^/app1/(.*)$ /$1 break;
}

优点：
- 避免跨域问题
- 共享主域cookie
- SEO友好

多子域名方案

分配规则 ：

复制代码

app1.example.com → 子应用1
app2.example.com → 子应用2

必需配置 ：

javascript 复制代码

// 主应用设置cookie域
document.cookie = "token=xxx; domain=.example.com; path=/";

跨域处理 ：

html 复制代码

<!-- 子应用页面配置 -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

动态域名注入

javascript 复制代码

// 主应用根据环境动态加载子应用
function loadApp(name) {
  const domain = {
    dev: `https://${name}-dev.example.com`,
    prod: `https://${name}.example.com`
  };
  const url = domain[env] + '/entry.js';
  import(url).then(...);
}

三、关键技术实现

模块加载方案

方案	实现方式	适用场景
构建时集成	将子应用作为npm包依赖	强耦合简单项目
运行时加载	通过SystemJS/import()动态加载	独立部署场景
iframe嵌套	每个子应用独立iframe	快速隔离但通信受限

样式隔离方案

javascript 复制代码

// Shadow DOM隔离（Web Components）
class MicroApp extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<style>/* 隔离样式 */</style>`;
  }
}
customElements.define('micro-app', MicroApp);

通信机制

javascript 复制代码

// 使用CustomEvent跨应用通信
// 主应用
window.dispatchEvent(new CustomEvent('global-event', { detail: data }));

// 子应用
window.addEventListener('global-event', handler);

四、域名处理最佳实践

Cookie共享方案

javascript 复制代码

// 主应用设置（.example.com域）
document.cookie = "auth_token=abc123; domain=.example.com; path=/";

// 子应用读取（app1.example.com）
console.log(document.cookie); // 可获取auth_token

跨域资源加载

html 复制代码

<!-- 子应用index.html -->
<script crossorigin="anonymous" src="https://cdn.example.com/lib.js"></script>

DNS预解析优化

html 复制代码

<!-- 主应用提前DNS预连接 -->
<link rel="dns-prefetch" href="//app1.example.com">
<link rel="preconnect" href="https://app1.example.com">

五、主流框架实现

Module Federation（Webpack 5）

javascript 复制代码

// 主应用配置
new ModuleFederationPlugin({
  remotes: {
    app1: "app1@http://app1.example.com/remoteEntry.js"
  }
});

// 子应用使用
import("app1/Button").then(Button => ...);

Single-SPA（路由级集成）

javascript 复制代码

// 子应用注册
singleSpa.registerApplication(
  'app1',
  () => System.import('app1'),
  location => location.pathname.startsWith('/app1')
);

Qiankun（阿里方案）

javascript 复制代码

// 主应用启动
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([{
  name: 'app1',
  entry: '//app1.example.com',
  container: '#container',
  activeRule: '/app1'
}]);
start();

六、部署与监控

独立部署流程

graph LR A[子应用构建] --> B[上传CDN] B --> C[更新主应用路由表] C --> D[触发灰度发布]

性能监控指标

指标	阈值	监控工具
子应用加载时间	<1s	Lighthouse
资源缓存命中率	>95%	CDN日志分析
跨应用通信延迟	<200ms	Sentry性能监控

七、适用场景与挑战

推荐使用场景

大型企业级后台系统（如阿里云控制台）
多团队协作的复杂产品线
渐进式迁移旧系统

典型挑战

样式污染：需严格隔离CSS作用域
状态共享：推荐使用Redux/Mobx的沙箱模式
版本兼容：统一基础依赖（如React版本）

通过合理的域名规划和架构设计，微前端可以实现：

技术栈无关性：各子应用独立技术选型
独立部署：单个应用更新不影响全局
渐进式迁移：逐步替换旧系统模块
团队自治：不同团队负责不同子应用