前端微前端实践：如何避免应用沦为巨石单体

远程应用（如 Dashboard）同样需要配置插件，暴露核心组件：

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'dashboard',
      filename: 'remoteEntry.js',
      exposes: {
        './Dashboard': './src/Dashboard',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
      },
    }),
  ],
};

在 React 主机中，使用 lazy 和 Suspense 加载远程模块：

import React, { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('dashboard/Dashboard'));
const Users = lazy(() => import('users/Users'));
const Products = lazy(() => import('products/Products'));
const Orders = lazy(() => import('orders/Orders'));
const Settings = lazy(() => import('settings/Settings'));

function App() {
  return (
    <div>
      {/* Header & Sidebar */}
      <main>
        <Suspense fallback={<div>加载中...</div>}>
          <Dashboard />
          <Users />
          <Products />
          <Orders />
          <Settings />
        </Suspense>
      </main>
    </div>
  );
}

export default App;

2. Single-SPA

Single-SPA 是一个 JavaScript 框架无关的微前端路由库，适合需要精细控制应用生命周期或混合多种框架的场景。

安装依赖：

npm install single-spa single-spa-react

主应用负责注册子应用，根据路径激活对应应用：

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: '@my-org/dashboard',
  app: () => import('@my-org/dashboard'),
  activeWhen: (location) => location.pathname.startsWith('/dashboard'),
});

registerApplication({
  name: '@my-org/users',
  app: () => import('@my-org/users'),
  activeWhen: (location) => location.pathname.startsWith('/users'),
});

// 其他应用注册...
start();

子应用需导出生命周期钩子（bootstrap, mount, unmount），以便主应用管理其挂载与卸载：

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Dashboard from './Dashboard';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Dashboard,
  errorBoundary(err, info, props) {
    return <div>应用出错了</div>;
  },
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

3. Qiankun

基于 Single-SPA 封装的 Qiankun 提供了更完善的沙箱隔离机制，对 Vue、React 等框架的支持更加开箱即用，是目前国内企业级应用的主流选择。

安装依赖：

npm install qiankun

主应用注册微应用，指定入口 URL 和激活规则：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'dashboard',
    entry: '//localhost:3001',
    container: '#micro-app-container',
    activeRule: '/dashboard',
  },
  {
    name: 'users',
    entry: '//localhost:3002',
    container: '#micro-app-container',
    activeRule: '/users',
  },
]);

start();

微应用需导出生命周期函数，并在其中处理渲染逻辑。Qiankun 支持多框架共存，例如在 React 主应用中嵌入 Vue 微应用：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

let instance = null;

function render(props) {
  const { container } = props;
  instance = createApp(App);
  instance.use(router);
  instance.mount(container ? container.querySelector('#app') : '#app');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('dashboard bootstraped');
}

export async function mount(props) {
  console.log('dashboard mounted', props);
  render(props);
}

export async function unmount() {
  console.log('dashboard unmounted');
  instance.unmount();
  instance = null;
}

总结

微前端并非银弹，但在应对复杂的大型系统时，它能有效降低耦合度，提升团队协作效率。通过合理选择 Module Federation、Single-SPA 或 Qiankun，结合项目的实际技术栈与运维能力，可以构建出既灵活又稳定的前端架构体系。