解决dumi项目中worker-loader与MFSU的兼容性问题

问题背景

在基于dumi框架开发的项目中，当开发者尝试使用worker-loader来加载Web Worker时，可能会遇到两个主要问题：

1. 初始报错："Module not found: Error: Can't resolve 'mf/worker-loader'"
2. 配置MFSU排除后出现："TypeError: Cannot read properties of undefined (reading 'startsWith')"

这些问题源于dumi的MFSU(Module Federation Speed Up)特性与worker-loader之间的兼容性问题。

问题分析

MFSU与worker-loader的冲突

dumi的MFSU特性通过模块联邦技术优化构建速度，但它会干扰worker-loader的正常工作。当两者同时使用时，会导致以下问题：

1. 路径解析错误：MFSU尝试重写模块路径，导致worker-loader无法正确解析
2. 版本检测问题：worker-loader内部会检测webpack版本，但在MFSU环境下可能无法正确获取webpack包信息

worker-loader版本问题

较新版本的worker-loader(如3.0.8)在检测webpack版本时使用了以下代码：

const useWebpack5 = require("webpack/package.json").version.startsWith("5.");

这段代码在MFSU环境下会失败，因为MFSU改变了模块加载方式，导致无法正确获取webpack的package.json信息。

解决方案

方案一：完全禁用MFSU

最简单的解决方案是直接关闭MFSU功能：

// .umirc.ts 或 config/config.ts
export default {
  mfsu: false,
  // 其他配置...
}

然后配合使用worker-loader的3.0.1版本，这个版本没有webpack版本检测的问题。

优点：

• 实现简单
• 彻底避免兼容性问题

缺点：

• 失去MFSU带来的构建速度优化

方案二：排除worker-loader的MFSU处理

如果希望保留MFSU的优化效果，可以尝试排除worker-loader：

export default {
  mfsu: {
    exclude: [/worker-loader/],
  },
  // 其他配置...
}

但需要注意：

1. 必须使用worker-loader 3.0.1或更早版本
2. 可能会遇到构建进度卡在50%的问题，这是因为MFSU的状态检查机制

方案三：使用替代方案

如果上述方案都不理想，可以考虑：

1. 使用Webpack 5内置的Worker语法：

   new Worker(new URL('./worker.js', import.meta.url));
   

2. 使用其他Worker加载方案，如comlink-loader等

最佳实践建议

1. 对于新项目，优先考虑使用Webpack 5内置的Worker语法
2. 对于现有项目，如果构建速度不是首要考虑，建议采用方案一（禁用MFSU）
3. 如果必须保留MFSU，确保使用worker-loader 3.0.1版本，并做好测试

总结

dumi项目中Worker的使用需要特别注意与MFSU的兼容性问题。通过合理配置和版本选择，可以找到适合项目需求的解决方案。理解这些技术背后的原理，有助于开发者在遇到类似问题时快速定位和解决。