1、背景

后台项目有很多重复的模块，如layout布局，工具方法，业务组件等。每个项目都重复写一遍，有一处改动，就需要改动多个项目。随着项目的越来越多，操作越来越麻烦。

2、目的

复用模块只需要在一个项目中修改， 其他项目都能生效。

3、方案选型

方案	缺点
npm包	需要发布npm包；调试麻烦；增加版本控制复杂度
monorepo	代码库庞大；构建时间长；
webpack5 Module Federation	需要修改webpack配置

4、接入

参考demo：github.com/module-fede…

4.1 remote项目导出

4.2 host项目导入

4.3 host项目引入复用模块

5、踩坑

5.1 入口js改造

Shared module is not available for eager consumption: webpack/sharing/consume/default/vue/vue

原因： remote项目的入口js需要改造，官方文档有说明：

host项目的入口文件也需要同样的改造。

5.2 域名不同publicPath配置

host项目加载remote远程模块时，使用的是remote远程项目的publicPath配置，如果两者域名不同，需要明确指定。如：

remote：/app2/
host: /app1/

此时host项目加载远程模块时，链接会变成：

应该配置为：

remote：http://localhost:3002/app2/
host: /app1/

此时host项目加载远程模块时，链接会变成：

5.3 remote项目的webpack配置：optimization.runtimeChunk

ScriptExternalLoadError: Loading script failed.

remote:

host:

原因： remote项目webpack配置了optimization.runtimeChunk为true

应该注释掉。

5.4 要去掉splitChunks

部署后host项目加载报错：

remote项目导出的[name]为undefined

正常应该是：

需要将webpack的splitChunks配置去掉！

6、实现原理

host项目加载顺序:

参考

juejin.cn/post/704812… juejin.cn/post/715128… juejin.cn/post/689532… www.qiyuandi.com/zhanzhang/z…