记录---前端微服务框架深度对比：无界（Momentum）与乾坤（Qiankun）实战指南
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<h3 data-id="heading-1">一、引言：为何选择微前端？</h3>
<p>在传统单体前端架构中，随着业务复杂度增加，代码臃肿、协作困难、部署效率低等问题愈发突出。微前端通过将项目拆分为多个独立自治的微应用，解决了这些问题：</p>
<ul>
<li>技术栈无关：支持 Vue、React、Angular 等框架混合开发</li>
<li>独立部署：各团队可独立开发、测试、发布</li>
<li>渐进升级：允许逐步重构旧系统</li>
<li>动态加载：按需加载减少首屏耗时</li>
</ul>
<p>本文将以电商后台管理系统为应用场景，对比分析无界（Momentum）与乾坤（Qiankun）两大框架的实现方式，通过完整示例代码揭示其核心差异。</p>
<hr>
<h3 data-id="heading-2">二、基础概念对比</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250911173222679-643130486.png" alt="企业微信截图_20250911173036" loading="lazy"></p>
<h3 data-id="heading-3">三、实战示例：电商后台管理系统</h3>
<h4 data-id="heading-4">场景描述</h4>
<p>假设某电商后台包含以下三个核心模块：</p>
<ol>
<li>商品管理（React 技术栈）</li>
<li>订单处理（Vue 技术栈）</li>
<li>用户中心（Angular 技术栈）</li>
</ol>
<p>主应用提供统一导航和登录态，各子应用独立开发部署。</p>
<hr>
<h4 data-id="heading-5">四、主应用配置（通用部分）</h4>
<h5 data-id="heading-6">1. 创建主应用（Vue 3）</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">vue create main-app
cd main-app
npm install momentum-ui # 无界框架
npm install qiankun # 乾坤框架</pre>
</div>
<h5 data-id="heading-7">2. 目录结构</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">main-app/
├── public/
│ └── index.html
├── src/
│ ├── components/
│ │ └── NavBar.vue
│ ├── App.vue
│ ├── main.js
│ └── ...
├── package.json</pre>
</div>
<h4 data-id="heading-8">五、无界框架实现</h4>
<h5 data-id="heading-9">1. 主应用配置（<code>src/main.js</code>）</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import { createApp } from 'vue'
import App from './App.vue'
import NavBar from './components/NavBar.vue'
import { registerMicroApps } from 'momentum-ui'
const app = createApp(App)
app.component('NavBar', NavBar)
app.mount('#app')
// 注册子应用
registerMicroApps([
{
name: 'product-react',
entry: '//localhost:7100',
activeRule: '/product',
container: '#subapp-container'
},
{
name: 'order-vue',
entry: '//localhost:7101',
activeRule: '/order',
container: '#subapp-container'
}
])</pre>
</div>
<h5 data-id="heading-10">2. 导航组件（<code>src/components/NavBar.vue</code>）</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><template>
<nav>
<router-link to="/product">商品管理</router-link>
<router-link to="/order">订单处理</router-link>
</nav>
</template></pre>
</div>
<h5 data-id="heading-11">3. 主应用模板（<code>public/index.html</code>）</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><body>
<div id="app">
<NavBar />
<div id="subapp-container"></div>
</div>
</body></pre>
</div>
<h4 data-id="heading-12">六、乾坤框架实现</h4>
<h5 data-id="heading-13">1. 主应用配置（<code>src/main.js</code>）</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">import { createApp } from 'vue'
import App from './App.vue'
import NavBar from './components/NavBar.vue'
import { registerMicroApps, start } from 'qiankun'
const app = createApp(App)
app.component('NavBar', NavBar)
app.mount('#app')
// 注册子应用
registerMicroApps([
{
name: 'product-react',
entry: '//localhost:7100',
activeRule: '/product',
container: '#subapp-container',
props: { allowRouter: true }
},
{
name: 'order-vue',
entry: '//localhost:7101',
activeRule: '/order',
container: '#subapp-container'
}
])
// 启动乾坤
start()</pre>
</div>
<h5 data-id="heading-14">2. 关键区别</h5>
<ul>
<li>无界：无需显式启动，注册即自动加载</li>
<li>乾坤：需调用 <code>start()</code> 激活沙箱环境</li>
<li>样式隔离：无界依赖 WebComponent 影子DOM，乾坤需配置 <code>sandbox: { strictStyleIsolation: true }</code></li>
</ul>
<hr>
<h4 data-id="heading-15">七、子应用开发（以 React 子应用为例）</h4>
<h5 data-id="heading-16">1. 创建子应用</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">npx create-react-app product-react
cd product-react
npm install momentum-ui # 或 qiankun</pre>
</div>
<h5 data-id="heading-17">2. 无界适配配置</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// src/index.js (无界)
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
if (window.__POWERED_BY_MOMENTUM__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_MOMENTUM__
}
ReactDOM.render(<App />, document.getElementById('root'))</pre>
</div>
<h5 data-id="heading-18">3. 乾坤适配配置</h5>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// src/index.js (乾坤)
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
let instance = null
function render(props) {
ReactDOM.render(<App {...props} />, document.getElementById('root'))
}
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
export async function bootstrap() {
console.log('React 子应用启动')
}
export async function mount(props) {
console.log('React 子应用挂载')
render(props)
}
export async function unmount() {
ReactDOM.unmountComponentAtNode(instance.container.querySelector('#root'))
console.log('React 子应用卸载')
}</pre>
</div>
<h3 data-id="heading-19">八、核心特性对比</h3>
<h4 data-id="heading-20">1. 样式隔离</h4>
<ul>
<li>无界：利用 WebComponent 的影子DOM自动隔离样式</li>
<li>乾坤：需开启严格样式隔离（<code>sandbox: { strictStyleIsolation: true }</code>），否则可能污染全局样式</li>
</ul>
<h4 data-id="heading-21">2. JS 沙箱</h4>
<ul>
<li>无界：通过 iframe 天然隔离，但跨帧通信成本较高</li>
<li>乾坤：采用函数代理沙箱，性能更优但需注意变量泄漏</li>
</ul>
<h4 data-id="heading-22">3. 动态路由</h4>
<ul>
<li>无界：支持动态注册路由，适合频繁变化的导购系统</li>
<li>乾坤：依赖主应用路由配置，更适合固定入口的场景</li>
</ul>
<hr>
<h3 data-id="heading-23">九、生产环境部署要点</h3>
<ol>
<li>
<p>构建顺序：</p>
<ul>
<li>先构建主应用，再依次构建子应用</li>
<li>使用带哈希的指纹版本避免缓存问题</li>
</ul>
</li>
<li>
<p>Nginx 配置示例：</p>
</li>
</ol>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">server {
listen 80;
location / {
root /path/to/main-app/dist;
try_files $uri $uri/ /index.html;
}
location /product/ {
proxy_pass http://localhost:7100;
}
location /order/ {
proxy_pass http://localhost:7101;
}
}</pre>
</div>
<ol start="3">
<li>跨域处理：
<ul>
<li>子应用需设置 <code>Access-Control-Allow-Origin</code></li>
<li>推荐使用 CDN 加速静态资源加载</li>
</ul>
</li>
</ol><hr>
<h3 data-id="heading-24">十、总结与选择建议</h3>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202509/2149129-20250911173432433-419952789.png" alt="企业微信截图_20250911173051" loading="lazy"></p>
<p> </p>
<p>通过本文的对比与实战演示，开发者可根据项目规模、技术复杂度、团队协作需求选择合适的微前端框架。建议从无界入手体验微前端优势，待业务扩展后再逐步迁移至乾坤。</p>
<div>
<h2>本文转载于：https://juejin.cn/post/7514956702345773065</h2>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19086424
頁:
[1]