react如何共用依赖

共享依赖的方法

在React项目中，可以通过多种方式实现依赖的共享，减少重复代码和优化性能。

使用monorepo结构 通过工具如Lerna或Yarn Workspaces创建monorepo，将多个项目放在同一仓库中。共享的依赖可以放在根目录的node_modules中，子项目通过软链接引用。

创建共享库 将公共代码封装为独立的npm包或本地库，通过npm link或直接引用本地路径在多个项目中使用。例如在package.json中：

"dependencies": {
  "shared-lib": "file:../shared-lib"
}

使用模块联邦（Module Federation） Webpack的Module Federation功能允许跨应用动态共享模块。配置示例：

// webpack.config.js
new ModuleFederationPlugin({
  name: 'app1',
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
});

提取公共依赖 通过Webpack的splitChunks将公共依赖单独打包，供多个入口共享：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}

注意事项

• 共享依赖需注意版本兼容性，特别是React要求单例模式。
• 对于微前端架构，Module Federation是更现代的解决方案。
• 测试阶段建议使用npm link或本地路径引用，生产环境推荐发布私有npm包。