如何在single-spa微前端应用中启用Vite HMR热更新？

方案一：微前端主动通知宿主重新挂载 #

利用Vite原生HMR钩子监听文件变更，通过postMessage通知宿主触发微前端的卸载+重新挂载，实现更新同步。

• 微前端代码示例：

// 微前端入口文件
if (import.meta.hot) {
  import.meta.hot.on('vite:beforeUpdate', () => {
    window.postMessage({
      type: 'MICRO_APP_UPDATE',
      appName: 'your-micro-app-name'
    }, window.location.origin);
  });
}

• 宿主代码处理：

// 宿主应用微前端挂载相关逻辑处
useEffect(() => {
  const handleMicroUpdate = (event: MessageEvent) => {
    if (event.data.type === 'MICRO_APP_UPDATE') {
      const { appName } = event.data;
      const appStatus = singleSpa.getAppStatus(appName);
      if (appStatus === 'MOUNTED') {
        singleSpa.unmountApplication(appName);
        setTimeout(() => {
          singleSpa.mountApplication(appName);
        }, 100);
      }
    }
  };

  window.addEventListener('message', handleMicroUpdate);
  return () => window.removeEventListener('message', handleMicroUpdate);
}, []);

该方案响应及时，无需额外轮询，是本地开发场景下的优先选择。

方案二：定时轮询微前端资源哈希 #

依赖Vite默认给构建资源添加的哈希标识，宿主定时请求微前端入口文件，通过对比ETag或最后修改时间判断是否更新，触发重新挂载。

• 宿主代码示例：

// 封装轮询检查函数
const pollMicroAppUpdate = (appName: string, entryUrl: string, interval = 3000) => {
  let lastHash = '';
  
  const checkUpdate = async () => {
    try {
      const response = await fetch(entryUrl, { method: 'HEAD' });
      const currentHash = response.headers.get('ETag') || response.headers.get('Last-Modified');
      
      if (currentHash && currentHash !== lastHash) {
        lastHash = currentHash;
        singleSpa.unmountApplication(appName);
        setTimeout(() => singleSpa.mountApplication(appName), 100);
      }
    } catch (err) {
      console.error(`Check ${appName} update failed:`, err);
    }
  };

  checkUpdate();
  const timer = setInterval(checkUpdate, interval);
  return () => clearInterval(timer);
};

// 在微前端挂载后启动轮询
useEffect(() => {
  const cleanUp = pollMicroAppUpdate('your-micro-app-name', 'http://localhost:5173/main.js');
  return cleanUp;
}, []);

该方案无需修改微前端代码，适合无法改动微前端配置的场景，缺点是存在更新延迟。

方案三：Vite模块联邦适配single-spa #

通过Vite的模块联邦（Module Federation）替代传统single-spa挂载逻辑，利用其原生跨应用HMR能力实现自动同步，需要重构微前端接入方式。

• 微前端Vite配置：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'microApp',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.tsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
});

• 宿主应用加载逻辑：

// 宿主中动态加载并挂载微前端
const loadMicroApp = async () => {
  const { App } = await import('microApp/App');
  // 结合single-spa生命周期完成挂载
};

模块联邦原生支持跨应用HMR同步，但需要调整现有微前端的构建和接入逻辑，适合新项目或有重构空间的场景。

注意事项 #

• 重新挂载微前端时，需清理微前端的全局状态，避免内存泄漏；若需保留状态，可在宿主共享store中暂存并在挂载时恢复。
• 使用postMessage时需指定正确的origin，本地开发跨端口场景可临时用*（仅限开发环境）。
• 轮询方案的间隔建议设置为3-5秒，避免频繁请求影响性能。

内容的提问来源于stack exchange，提问作者RifloSnake