Repack项目中如何配置Webpack复用主包依赖

在React Native应用开发中，使用Repack v4结合Module Federation插件时，开发者经常会遇到子应用(迷你应用)重复打包共享依赖(如react和react-native)的问题。本文将深入探讨如何通过Webpack配置实现依赖复用，优化应用体积。

问题背景

当我们在主应用(host app)和子应用(mini app)中都使用了相同的第三方库时，默认情况下Webpack会将这些依赖分别打包到各自的bundle中。这会导致：

• 应用体积增大
• 内存中加载重复代码
• 资源浪费

解决方案核心

Repack项目文档中提到，动态脚本默认不会共享依赖。要实现依赖复用，关键在于正确配置Webpack的共享依赖机制。

具体实现步骤

1. 配置共享依赖：在Webpack配置中明确声明哪些依赖应该被共享

2. 使用import: false参数：这是解决问题的关键配置项，它告诉Webpack：

   • 永远不要从当前应用中使用备用依赖
   • 始终依赖主应用中已存在的共享依赖

3. 结合其他配置参数：

   • singleton: 确保只加载一个版本的依赖
   • eager: 立即加载依赖而不是异步加载

配置示例

shared: {
  react: {
    singleton: true,
    eager: true,
    import: false  // 关键配置，防止重复打包
  },
  'react-native': {
    singleton: true,
    eager: true,
    import: false
  }
}

实现原理

当设置import: false时，Webpack会：

1. 完全信任主应用提供的共享依赖
2. 不会在当前应用的输出目录中包含这些依赖
3. 运行时直接从主应用获取这些依赖

注意事项

1. 确保主应用确实提供了这些共享依赖
2. 主应用和子应用的共享依赖版本需要兼容
3. 在开发环境中验证依赖确实被共享而没有重复加载

通过这种配置方式，开发者可以显著优化React Native应用的体积和性能，特别是在使用Module Federation实现微前端架构时。