3. Webpack external
我们知道
webpack中有externals的配置，主要是用来配置：webpack输出的bundle中排除依赖，换句话说通过在external定义的依赖，最终输出的bundle不存在该依赖，主要适用于不需要经常打包更新的第三方依赖，以此来实现模块共享。
下面是一个vue.config.js 的配置文件，通过配置exteral移除不经常更新打包的第三方依赖👇
你可以通过在packjson中script定义的命令后添加--report查看打包📦后的分析图，如果是webpack就是用使用插件webpack-bundle-analyzer
阿乐童鞋： 🌲 树酱，那移除了这些依赖之后，如何保证应用正常使用？
浏览器环境：我们使用cdn的方式在入口文件引入，当然你也可以预先打包好，比如把vue全家桶打包成vue-family.min.js文件，最终达成多应用共享模块的效果
<script src="<%= VUE_APP_UTILS_URL %>static/js/vue-family.min.js"></script>
总结：避免公共模块包(package) 一起打到bundle 中，而是在运行时再去从外部获取这些扩展依赖
通过这种形式在微前端基座应用加载公共模块，并将微应用引用同样模块的external移除掉，就可以实现模块共享了 但是存在微应用技术栈多样化不统一的情况，可能有的使用vue3，有的使用react开发，但externals 并无法支持多版本共存的情况，针对这种情况该方式就不太适用
4. Webpack DLL
官方介绍："DLL" 一词代表微软最初引入的动态链接库, 换句话说我的理解，可以把它当做缓存，通过预先编译好的第三方外部依赖bundle，来节省应用在打包时混入的时间
Webpack DLL 跟 上一节提到的external本质是解决同样的问题：就是避免将第三方外部依赖打入到应用的bundle中（业务代码），然后在运行时再去加载这部分依赖，以此来实现模块复用，也提升了编译构建速度
webpack dll模式下需要配置两份webpack配置，下面是主要两个核心插件
4.1 DllPlugin
DllPlugin：在一个独立的webpack进行配置webpack.dll.config.js，目的是为了创建一个把所有的第三方库依赖打包到一起的bundle的dll文件里面，同时还会生成一个manifest.json的文件，用于：让使用该第三方依赖集合的应用配置的DllReferencePlugin能映射到相关的依赖上去 具体配置看下图👇
4.2 DllReferencePlugin
DllReferencePlugin：插件核心是把上一节提到的通过webpack.dll.config.js中打包生成的dll文件，引用到需要实际项目中使用，引用机制就是通过DllReferencePlugin插件来读取vendor-manifest.json文件，看看是否有该第三方库，最后通过add-asset-html-webpack-plugin插件在入口html自动插入上一节生成的vendor.dll.js 文件， 具体配置看下图👇
5. 联邦模块 Module Federation
模块联邦是 Webpack5 推出的一个新的重要功能，可以真正意义上实现让跨应用间做到模块共享，解决了从前用 NPM 公共包方式共享的不便利，同时也可以作为微前端的落地方案，完美秒杀了上两节介绍webpack特征
用过qiankun的小伙伴应该知道,qiankun微前端架构控制的粒度是在应用层面，而Module Federation控制的粒度是在模块层面。相比之下，后者粒度更小，可以有更多的选择
与qiankun等微前端架构不同的另一点是，我们一般都是需要一个中心基座去控制微应用的生命周期，而Module Federation则是去中心化的，没有中心基座的概念，每一个模块或者应用都是可以导入或导出，我们可以称为：host和remote，应用或模块即可以是host也可以是remote，亦或者两者共同体
看看下面这个例子👇
核心在于 ModuleFederationPlugin中的几个属性
remote: 示作为 Host 时，去消费哪些 Remote；exposes:表示作为 Remote 时，export 哪些属性提供给 Host 消费shared: 可以让远程加载的模块对应依赖改为使用本地项目的 vue，换句话说优先用 Host 的依赖，如果 Host 没有，最后再使用自己的
后期也会围绕 Module Federation 去做落地分享
🌲 推荐阅读：
