微前端（Micro Frontends）

微前端是一種架構理念，借鑒了微服務的思想，將一個大型的前端應用拆分為多個獨立、自治的子應用，每個子應用可以由不同團隊、使用不同技術棧獨立開發和部署，最終聚合為一個整體產品。

---

🧱 生活化類比示例：樂高拼圖理解微前端

想象你在搭樂高城堡，原來需要所有人擠在一起拼同一塊，誰手抖碰倒一塊整個城堡都塌了。現在改用微前端，相當于：

• 你把城堡分成城門、主樓、城墻幾個獨立部分

• 小明團隊用木頭材料拼城門

• 小紅團隊用塑料積木搭主樓

• 你自己用 3D 打印做城墻

• 最后像拼圖一樣組合起來，各部分還能隨時單獨升級改造

這樣既避免了不同團隊互相干擾，又能讓擅長不同材料的人各展所長，整個城堡還不會因為某部分出問題就全盤崩潰。這就是微前端最接地氣的理解方式。

---

🧐 什么是微前端？

微前端是一種將前端整體架構模塊化、服務化、解耦的方案。

核心思想：

• 主應用負責公共框架、路由分發；

• 子應用負責獨立業務模塊（如訂單管理、用戶中心）；

• 各子應用可獨立部署、獨立運行、獨立構建；

• 技術棧可異構（如主應用用 Vue，子應用可用 React）；

---

? 微前端的優勢

🎯 微前端適用場景

• 大型平臺型項目（如企業管理后臺、電商后臺、SaaS 系統）

• 多團隊協作開發的大型前端項目

• 系統重構期，需“漸進式”升級的項目

• 多業務線共存，每個團隊維護一個功能模塊

舉例：阿里巴巴的「統一運營平臺」使用微前端將多個 B 端應用模塊集成；騰訊企業微信多個業務線使用微前端統一接入主框架。

---

🛠? 主流微前端解決方案

🔧 示例：qiankun 快速接入

主應用（Vue）接入子應用（React）

// 主應用 main.js
import { registerMicroApps, start } from 'qiankun';registerMicroApps([{name: 'reactApp',entry: '//localhost:3001', // 子應用入口container: '#subapp-container',activeRule: '/react', // 路由規則}
]);start();

<!-- 主應用容器 index.html -->
<div id="subapp-container"></div>

子應用設置動態資源路徑（Webpack）

// 子應用 React - public-path.js
if (window.__POWERED_BY_QIANKUN__) {// 動態設置資源路徑__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

---

?? 面臨的挑戰

?? 性能優化建議

1. 避免重復打包公共依賴

將 Vue/React 等設為 external，主應用通過 CDN 注入：

// vue.config.js 或 webpack.config.js
externals: {vue: 'Vue',react: 'React','react-dom': 'ReactDOM',
}

2. 預加載子應用資源

start({prefetch: true, // 開啟資源預加載
});

3. 緩存子應用

在主應用中緩存子應用實例，避免每次進入都重新 mount。

4. 異步加載子應用腳本

<script src="child-app.js" defer></script>

5. 全局事件通信 bus

// 主應用通信工具
import mitt from 'mitt';
export const eventBus = mitt();// 子應用中通信示例
eventBus.emit('login-success', userInfo);
eventBus.on('set-theme', (theme) => { ... });

---

? 總結

微前端為大型應用系統帶來了極大的靈活性和可擴展性，適合多團隊并行開發場景。但同時也帶來了通信、樣式、性能等方面的新挑戰。通過合理的架構設計與技術選型，可以最大化其優勢，構建現代化前端基礎設施。

文章轉載自：幼兒園技術家

原文鏈接：什么是微前端？有什么好處？有哪一些方案？ - 幼兒園技術家 - 博客園

體驗地址：引邁 - JNPF快速開發平臺_低代碼開發平臺_零代碼開發平臺_流程設計器_表單引擎_工作流引擎_軟件架構