微前端（Micro-Frontends）的概念，如同微服务在后端一样，为解决大型前端应用的痛点提供了全新的思路。它倡导将一个庞大的前端「巨石应用」拆分为多个独立开发、独立部署、独立运行的「微应用」，从而带来技术栈无关、团队自治、可独立迭代等诸多优势。

理论很丰满，但实践往往骨感。很多团队在初次接触微前端时，往往会面临「无从下手」、「踩坑无数」的困境。

雪狼今天就想和大家一起，将微前端的理论知识进行「落地」，通过一个「从零到一」的实践路径，带你构建你的第一个微前端应用，感受这种「乐高积木式」构建大型前端的魅力。

一、为什么选择微前端？：巨石应用的「痛苦」#

在开始实践之前，我们先快速回顾一下，为什么我们需要微前端？它解决了前端「巨石应用」的哪些痛点：

  1. 代码库庞大，构建缓慢：每次改动都需要构建整个项目，耗时长，效率低。

  2. 团队协作效率低：多团队在同一个代码库上开发，代码冲突频繁，沟通成本高。

  3. 技术栈锁定：难以引入新的前端框架或升级旧的技术栈。

  4. 独立部署困难：任何小的改动都需要发布整个应用。

  5. 单点故障风险高：某个模块的 bug 可能导致整个应用不可用。

微前端的核心价值，就是通过「分而治之」 的思想，缓解这些痛点。

二、微前端实践之「基石」：核心概念的落地#

构建微前端应用，需要理解并实践几个核心概念：

1. 主应用 (Main App / Host App)：微前端的「底座」#

  • 职责：负责微应用的加载、挂载、卸载、路由管理，以及微应用之间的通信协调。

  • 技术选型：可以使用任何前端框架（Vue、React、Angular），也可以是纯 HTML/CSS/JS。

  • 比喻：主应用就像乐高积木的底板，它提供了一个统一的平台，让所有微应用都能被正确地拼接到上面。

2. 微应用 (Micro App / Child App)：独立的「积木块」#

  • 职责：实现特定的业务功能模块，可以独立开发、独立部署、独立运行。

  • 技术选型：每个微应用可以采用不同的前端技术栈，实现技术栈无关。

  • 比喻：微应用就是那些独立的乐高积木块，它们可以被设计成不同的形状和颜色，但都遵循乐高底板的接口规范，可以被随时插拔。

3. 应用注册与加载：如何将积木「拼接」？#

  • 注册机制：主应用需要知道有哪些微应用可用，以及它们的基本信息（名称、入口 URL、激活规则等）。

  • 加载方式：

    • HTML Entry：微应用暴露一个 HTML 文件作为入口，主应用通过解析 HTML 来加载微应用的资源（JS/CSS）。

    • JS Entry：微应用暴露一个 JS 文件，其中包含生命周期函数（mount/unmount），主应用通过调用这些函数来挂载和卸载微应用。

4. 路由管理：页面的「导航员」#

  • 主应用路由：负责匹配顶层路由，决定哪个微应用应该被激活。

  • 微应用路由：负责处理微应用内部的路由。

  • 比喻：路由管理就像乐高底板上的路线指示牌。当用户点击某个指示牌时，底板就会自动加载并显示对应的乐高积木区域。

5. 通信机制：积木块如何「对话」？#

  • 全局状态管理：如 Redux、Vuex，但仅限于微应用内部。

  • 主子应用通信：

    • Props 传递：主应用通过 props 向微应用传递数据和方法。

    • 发布订阅模式：通过自定义事件总线（Event Bus）进行通信。

    • 共享存储：如 Local Storage、Session Storage，但需注意命名冲突。

    • 比喻：积木块之间的「对话」可以是直接的「拉手」（Props），也可以是「悄悄话」（事件总线），甚至是「贴小纸条」（共享存储）。

文生图：扁平插画风格，画面中心是一个巨大的“乐高”积木底板（代表主应用）。各种颜色和形状的乐高积木（代表微应用）正在被不同的人（代表不同的前端团队）拼接到这个底板上，每个积木都有清晰的接口，相互连接但又保持独立。一个程序员（代表实践者）手持一本带有“微前端理论”字样的书，正指导大家如何将积木正确组装。背景是抽象的数字模块，突出模块化和组合性。色彩明亮，富有创造力。

三、构建你的第一个微前端应用：从零到一#

这里以 qiankun (乾坤) 框架为例，因为它提供了开箱即用的解决方案。

Step 1: 初始化主应用 (Main App)#


vue create my-main-app

# 或者

npx create-react-app my-main-app

cd my-main-app

# 安装 qiankun

npm install qiankun --save

在主应用中，配置 qiankun 注册和加载微应用。


// main-app/src/main.js

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([

  {

    name: 'vue-app', // 微应用的名称，必须唯一

    entry: '//localhost:8081', // 微应用的入口 URL

    container: '#container', // 微应用挂载的 DOM 元素

    activeRule: '/vue', // 微应用的激活规则，当路由匹配时激活

  },

  {

    name: 'react-app',

    entry: '//localhost:8082',

    container: '#container',

    activeRule: '/react',

  },

]);

start(); // 启动 qiankun

// 在 App.vue/App.js 中定义微应用挂载的容器

// <div id="container"></div>

Step 2: 初始化微应用 (Micro App)#


# 创建一个 Vue/React 项目作为微应用

vue create my-vue-app --port 8081 # 注意端口号

# 或者

npx create-react-app my-react-app --port 8082 # 注意端口号

cd my-vue-app

# 或者 cd my-react-app

配置微应用使其支持 qiankun。这通常涉及暴露生命周期钩子 (bootstrap, mount, unmount)。


// my-vue-app/src/main.js (Vue)

import Vue from 'vue';

import App from './App.vue';

import router from './router';

Vue.config.productionTip = false;

let instance = null;

function render(props = {}) {

  const { container } = props;

  instance = new Vue({

    router,

    render: h => h(App),

  }).$mount(container ? container.querySelector('#app') : '#app');

}

// 独立运行时

if (!window.__POWERED_BY_QIANKUN__) {

  render();

}

export async function bootstrap() {

  console.log('[vue-app] bootstraped');

}

export async function mount(props) {

  console.log('[vue-app] mount', props);

  render(props);

}

export async function unmount() {

  console.log('[vue-app] unmount');

  instance.$destroy();

  instance.$el.innerHTML = '';

  instance = null;

}

Step 3: 运行与验证#

分别启动主应用和微应用：


# 在 my-main-app 目录下

npm run serve # 或者 npm start

# 在 my-vue-app 目录下

npm run serve # 或者 npm start

# 在 my-react-app 目录下

npm run serve # 或者 npm start

访问主应用的地址，通过路由切换（例如访问 /vue 或 /react）来查看微应用的加载效果。

总结#

  • 主应用：提供统一的入口，负责调度和管理微应用。

  • 微应用：独立的业务模块，可插拔。

  • 加载机制：主应用通过 entry 加载微应用的资源。

  • 生命周期：微应用需要暴露 bootstrap, mount, unmount 等生命周期钩子。

结语#

微前端并非银弹，它引入了新的复杂性，如环境隔离、通信机制、性能优化等。但对于大型、多团队协作的前端项目而言，它的价值是巨大的。

通过「乐高积木式」的构建方式，我们可以将复杂的巨石应用拆解为更小、更易于管理、更具韧性的独立单元。这不仅提升了开发效率、团队自治性，更让我们的前端架构能够更好地适应业务的快速变化。

正如《庄子·逍遥游》所言：「小知不及大知，小年不及大年。」 面对复杂的大型前端，我们不能拘泥于「小知」的单体模式，而应该学习「大知」的微前端思想，以宏大的视野，构建更具生命力的前端世界。

Backward 08.微前端是新范式 10.微前端的未来 Forward