如何通过ModuleFederationPlugin实现远程模块的运行时动态重载？

针对你用Vue宿主+基于Promise的动态远程模块构建微前端，需要运行时重载远程模块的需求，这里给出可行的实现方案，核心是绕过浏览器和webpack的双重缓存：

1. 给远程入口URL添加缓存戳，强制浏览器重新请求 #

每次加载远程模块时，给入口URL追加唯一的查询参数（比如时间戳），让浏览器认为是新资源，绕过缓存重新拉取文件。

2. 清除webpack内部的模块缓存 #

webpack会缓存已加载的远程模块引用，所以需要手动清除这些缓存记录，确保下次加载时重新初始化模块。

封装通用加载函数 #

async function loadRemote(remoteName, entryUrl) {
  // 生成带缓存戳的新入口URL
  const bustedEntry = `${entryUrl}?v=${Date.now()}`;

  // 清除已缓存的远程模块全局变量
  if (window[remoteName]) {
    delete window[remoteName];
  }

  // 清除webpack内部的模块缓存（webpack 5）
  const refModuleId = `webpack/container/reference/${remoteName}`;
  if (__webpack_modules__[refModuleId]) {
    delete __webpack_modules__[refModuleId];
  }

  // 动态加载远程入口脚本
  await new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = bustedEntry;
    script.async = true;
    script.onload = () => {
      script.remove();
      resolve();
    };
    script.onerror = reject;
    document.body.appendChild(script);
  });

  // 获取并返回远程模块
  return await window[remoteName].get('./App');
}

Vue组件中实现重载逻辑 #

在Vue组件里通过响应式变量控制远程组件的加载和卸载，触发重载时先清空当前组件，再重新调用加载函数：

<template>
  <div>
    <button @click="handleReload">重载微前端模块</button>
    <component :is="remoteComp" v-if="remoteComp" />
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const remoteComp = ref(null);
// 配置远程模块信息
const REMOTE_CONFIG = {
  name: 'myRemoteApp',
  entry: 'http://your-remote-domain/remoteEntry.js'
};

// 加载远程模块
async function initRemote() {
  try {
    const module = await loadRemote(REMOTE_CONFIG.name, REMOTE_CONFIG.entry);
    remoteComp.value = module.default;
  } catch (err) {
    console.error('加载远程模块失败:', err);
    // 这里可以添加错误提示逻辑
  }
}

// 重载逻辑
async function handleReload() {
  // 先卸载当前组件，避免内存泄漏
  remoteComp.value = null;
  // 等待DOM更新后重新加载
  await nextTick();
  await initRemote();
}

// 用户启用功能时调用
// initRemote();
</script>

关键注意点 #

• webpack版本适配：__webpack_modules__是webpack 5的内部变量，如果你用webpack 4，可以尝试清除require.cache中对应模块的缓存，但动态远程模块的缓存处理可能略有不同。
• 错误处理：必须添加错误捕获，处理远程模块加载失败的情况（比如网络问题、模块下线）。
• 内存泄漏防范：重载前要确保旧组件实例被正确销毁，Vue的动态组件在v-if置为false时会自动销毁实例，但复杂场景下可能需要手动清理事件监听等资源。
• 跨域配置：确保远程服务器允许跨域请求，或者在webpack devServer中配置headers: { "Access-Control-Allow-Origin": "*" }。

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