什么是微前端架构？

微前端架构是一种将前端应用拆解为独立开发、独立部署的模块的工程化方法，允许团队使用不同技术栈协作构建大型单应用。它源于微服务思想，核心目标是通过解耦提高代码维护性、部署灵活性和团队效率。

核心概念

1. 独立开发与部署：每个模块（称为“团队”或“Remote”应用）可独立编码、测试和发布，实现增量更新而无需全局重建。这增强了开发效率，减少团队依赖。
2. 共享与集成机制：使用技术如 Webpack 模块联邦实现跨应用模块共享（如 UI 组件、工具函数），实现无缝整合。基于模块加载器协调依赖版本冲突（如通过 _webpack_share_scopes_）。
3. 与iframe比较：不同于传统 iframe 导致的上下文隔离差和性能问题，微前端支持运行时模块通信，实现动态集成。

实现方式（以模块联邦为主）

模块联邦是 Webpack 5 的核心插件，示例配置步骤如下：

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

// Remote 应用配置（独立提供模块）
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "ProductList",  // 应用标识
      filename: "remoteEntry.js",  // 入口文件
      exposes: { "./App": "./src/App" },  // 暴露组件
      shared: ["react", "react-dom"],  // 共享依赖
    }),
  ],
};

// Host 应用（整合其他模块）
import("http://remote-app.com/remoteEntry.js").then((remote) => {
  const ProductList = remote.get("ProductList/App");  // 动态加载远程模块
  renderToDom(ProductList);  
});

常见模式

• 去中心化模式：各模块无基础框架支持，互相调用组件/函数（图：应用 A 使用 B 的组件）。
• 基座模式：统一 Host 应用封装加载容器管理所有子模块。
• 应用场景：跨组织资源共享（e.g., 企业级 UI 复用），渐进迁移旧框架。

优缺点

• 优势：独立部署加快发布周期，提升团队自治性；使用多框架无缝集成（如 React / Vue 混用）。
• 挑战：共享依赖版本需强一致协调（如 React 不同版本冲突）；初始配置较复杂。

工具支持扩展至 Vite 生态（如 @originjs/vite-plugin-federation）以优化构建性能。