微前端

架构原理

微前端是一种前端架构模式，将前端应用分解成更小、更简单的块，这些块可以独立开发、测试和部署。其核心原则包括技术栈无关、团队自治、独立部署、状态隔离和优雅降级等。

核心原则

• 技术栈无关: 不同微应用可以使用不同的技术栈
• 团队自治: 每个团队可以独立开发和部署
• 独立部署: 微应用可以独立部署，不影响其他应用
• 状态隔离: 微应用之间的状态相互隔离
• 优雅降级: 某个微应用失败不影响整体功能

实现方案

微前端的实现方案多样，包括基于路由的分发、iframe隔离、Web Components、JavaScript运行时隔离等。

基于路由的分发

// 主应用路由配置
const routes = [
  {
    path: '/app1/*',
    component: () => import('./micro-apps/app1')
  },
  {
    path: '/app2/*',
    component: () => import('./micro-apps/app2')
  }
];

iframe隔离

<!-- 主应用HTML -->
<div id="app1-container">
  <iframe src="http://app1.example.com" frameborder="0"></iframe>
</div>
<div id="app2-container">
  <iframe src="http://app2.example.com" frameborder="0"></iframe>
</div>

Web Components

// 微应用注册为Web Component
class MicroApp extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <div>微应用内容</div>
    `;
  }
}

customElements.define('micro-app', MicroApp);

JavaScript运行时隔离

// 使用Proxy实现状态隔离
const createIsolatedState = (initialState) => {
  return new Proxy(initialState, {
    get(target, prop) {
      return target[prop];
    },
    set(target, prop, value) {
      target[prop] = value;
      return true;
    }
  });
};

实践挑战

微前端实践中面临的挑战包括应用间通信、样式隔离、公共依赖管理、性能优化等。

应用间通信

// 使用CustomEvent进行通信
class EventBus {
  constructor() {
    this.events = {};
  }
  
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
}

// 使用
const eventBus = new EventBus();
eventBus.on('user-login', (user) => {
  console.log('User logged in:', user);
});
eventBus.emit('user-login', { id: 1, name: 'John' });

样式隔离

/* 使用CSS Modules */
.app1 {
  /* 应用1的样式 */
}

.app2 {
  /* 应用2的样式 */
}

/* 使用Shadow DOM */
.micro-app {
  /* 微应用容器样式 */
}

公共依赖管理

// 使用Module Federation
// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

主流框架

qiankun

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:3001',
    container: '#app1-container',
    activeRule: '/app1'
  },
  {
    name: 'app2',
    entry: '//localhost:3002',
    container: '#app2-container',
    activeRule: '/app2'
  }
]);

start();

single-spa

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => import('./app1'),
  activeWhen: '/app1'
});

registerApplication({
  name: 'app2',
  app: () => import('./app2'),
  activeWhen: '/app2'
});

start();

Module Federation

// 主应用
import('app1/App').then(module => {
  const App = module.default;
  ReactDOM.render(<App />, document.getElementById('root'));
});

// 微应用
export default function App() {
  return <div>微应用内容</div>;
}

最佳实践

架构设计

1. 明确边界: 清晰定义微应用的职责边界
2. 技术选型: 选择适合团队的技术栈
3. 通信机制: 设计合理的应用间通信方案
4. 部署策略: 制定独立的部署和发布策略

开发规范

1. 代码规范: 统一代码风格和开发规范
2. 测试策略: 建立完善的测试体系
3. 文档管理: 维护清晰的技术文档
4. 版本管理: 建立版本控制和发布流程

性能优化

1. 懒加载: 按需加载微应用
2. 缓存策略: 合理使用浏览器缓存
3. 资源优化: 优化静态资源加载
4. 监控告警: 建立性能监控体系