微前端架构在大型项目中的落地经验（适合零基础入门）
开篇：微前端是什么？为什么要用它？
你有没有遇到过这样的情况：
一个项目越来越大，代码越来越多，修改一点功能都需要等很久才能测试成功，团队协作越来越难……
这是很多大型前端项目的常见问题。为了解决这些问题，人们提出了“微前端架构”这个方案。
那什么是微前端呢？
你可以把它理解成像“拼乐高积木”一样的方式来开发网页应用。
- 每个功能模块是一个独立的小应用
- 这些小应用可以由不同的小组各自开发、测试、部署
- 最后统一组合在一个主页面中运行
这样做的好处很明显：
| 好处 | 解释 |
|---|---|
| 更快的开发速度 | 各小组同时开发不同模块 |
| 更容易维护 | 修改或升级某个部分不会影响整体 |
| 技术灵活 | 可以混合使用 Vue、React、Angular 等不同技术栈 |
环境准备：搭建你的第一个微前端开发环境
我们使用一个流行的微前端框架 —— qiankun 来做演示。
第一步：安装 Node.js 和 npm
请到官网 https://nodejs.org/ 下载安装包，选择 LTS 版本即可。
安装完成后，在命令行中执行：
node -v
npm -v
看到版本号就说明安装成功了 ✅
第二步：创建一个空白项目目录
新建一个文件夹，比如叫 my-micro-frontends，然后进入该目录：
mkdir my-micro-frontends
cd my-micro-frontends
初始化项目：
npm init -y
第三步：安装主应用所需的依赖
npm install --save qiankun
我们还会使用 React 作为主框架，所以也装一下 React：
npm install --save react react-dom
现在你的项目结构应该像这样：
my-micro-frontends/
├── node_modules/
├── package.json
接下来我们就开始写代码啦！
核心概念：用通俗语言解释关键术语
微前端听起来很高大上，但其实它的核心概念并不复杂。我们来逐一介绍：
1. 主应用（Host / Container）
就像乐高的底座，用来承载所有其他模块。
- 负责加载子应用
- 提供公共样式、路由等共享资源
2. 子应用（Micro App）
每个子应用都是一个完整的小型应用，例如一个用户管理模块、一个订单模块。
- 每个子应用独立打包、独立部署
- 可以使用不同的技术栈（React/Vue/Angular）
- 必须支持注册为微前端模块
3. 生命周期函数
为了让各个子应用能在主应用中正常运行，你需要定义一些生命周期函数：
| 生命周期阶段 | 功能描述 |
|---|---|
bootstrap |
初始化时运行一次 |
mount |
页面显示时调用 |
unmount |
页面销毁时调用 |
这些函数就像插件一样被主应用调用。
小结概念
我们可以打个比方：
主应用是一座房子，子应用是各种家具。你可以随时更换某一件家具而不影响整栋房子的结构。
实战项目：一步步完成一个简单微前端应用
我们将做一个主应用，里面展示两个子应用：
- 用户中心（User Center）
- 订单中心（Order Center）
我们会分别创建它们，并把它们注册到主应用中。
第一步：创建主应用（React）
在你的项目根目录下新建一个 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>微前端主应用</title>
</head>
<body>
<div id="root"></div>
<div id="user-app-container"></div>
<div id="order-app-container"></div>
</body>
</html>
然后创建 src/main.jsx：
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>我是主应用</h1>);
执行以下命令安装 React 开发工具并启动：
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev html-webpack-plugin webpack-dev-server
npx webpack serve --open
此时你应该能看到“我是主应用”的字样出现在浏览器中 🎉
第二步：创建子应用（Vue）
我们先创建一个最简单的 Vue 子应用，模拟用户中心模块。
新建一个文件夹叫 user-center，然后在里面执行：
npm init -y
npm install --save vue
创建一个 src/main.js：
import { createApp } from 'vue'
createApp({
template: `<h2>用户中心</h2>`
}).mount('#user-app-container');
再创建一个入口 HTML：
<!-- user-center/index.html -->
<h2 id="user-app-container"></h2>
<script src="main.js"></script>
第三步：让主应用加载子应用
在主应用中，我们要使用 qiankun 的 API 来注册并挂载子应用。
先修改主应用的 package.json：
"scripts": {
"start": "webpack serve"
}
再在主应用的 JavaScript 中加载子应用：
// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { registerMicroApps, start } from 'qiankun';
// 主应用内容
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>我是主应用</h1>);
// 注册子应用
registerMicroApps([
{
name: 'user-center',
entry: '//localhost:7101', // 子应用地址
container: '#user-app-container',
activeRule: '/user',
},
]);
start(); // 启动微前端系统
为了测试子应用是否能被加载，我们需要为子应用单独配置 Webpack Dev Server。
在 user-center 文件夹里创建一个 webpack.config.js：
const path = require('path');
module.exports = {
mode: 'development',
devServer: {
port: 7101,
},
entry: './src/main.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
最后运行子应用服务器：
npx webpack serve --config webpack.config.js
现在主应用应该能在 /user 地址下加载 Vue 写的用户中心了！
常见问题解答（FAQ）
❓ 子应用为什么不能直接用 HTML 引入？
因为微前端需要控制生命周期和通信机制，必须通过 JS 动态加载。直接引用 HTML 只是一个静态页面，无法满足这些需求。
✅ 正确做法：子应用必须提供可动态加载的 JS 包，并暴露生命周期钩子。
❓ 不同子应用之间怎么通信？
可以通过全局变量或者封装事件总线来实现。推荐使用如下两种方式：
- 全局状态管理器（如 Redux、Vuex）
- 使用
qiankun提供的globalState共享状态
示例代码：
// 主应用设置全局状态
import { setGlobalState } from 'qiankun';
setGlobalState({ user: 'Alice' });
// 子应用中获取
window.qiankunStateFromMain = {
user: null,
};
❓ 子应用如何与主应用共用样式？
可以将公用 CSS 文件放到主应用中，然后通过 CDN 或本地引入的方式让子应用也加载同一份 CSS 文件。
也可以使用 CSS Modules 或 Shadow DOM 避免样式冲突。
❓ 子应用使用了不同的框架怎么办？
没问题！qiankun 支持多种技术栈混合使用。只需确保子应用暴露了正确的生命周期函数即可。
❓ 子应用加载慢怎么办？
建议优化措施：
- 使用懒加载（按需加载）
- 子应用使用 Code Splitting 拆分 JS
- 使用 CDN 加速静态资源
学习建议：下一步该怎么提升？
恭喜你完成了第一个微前端项目！
下一步，你可以尝试：
✅ 进阶方向一：使用路由整合多个子应用
学习 Vue Router + qiankun 的配合使用，实现更复杂的导航。
✅ 进阶方向二：深入子应用通信机制
尝试编写一个跨应用的消息传递组件，提升团队协作能力。
✅ 进阶方向三：上线部署优化
学习如何将微前端项目部署到 Nginx 或 CDN 上，提高性能和稳定性。
总结回顾
在本文中，我们学习了：
- 微前端的基本概念和应用场景
- 如何搭建一个简单的微前端项目
- 如何使用 qiankun 框架注册和加载子应用
- 新手常见的问题及解决方案
- 学完之后如何继续深入学习
希望这篇教程能让你顺利入门微前端的世界，未来可以在大型项目中发挥更大作用 🚀
如果你觉得这篇文章有帮助，欢迎分享给更多需要的朋友 ❤️
评论 0