微前端最近已经很火了，最近跟着火的还有 webpack5 module federation 了，想必大家都有耳闻了。但是我今天主要讲的是微模块，我觉得它更值得被推崇。
微模块的优势如下：
- 模块化按需编译
- 模块化部署发布，增量更新
- 跨项目共享微模块(支持配置 host 和 version)
微前端 和 微模块 的区别，👇请看下图所示。
微前端架构
微前端架构更多的是解决不同应用 或 不同技术栈之间的共存方案
微模块架构
微模块架构更多的是解决同一应用技术栈内模块编译、打包，以及共享模块的方案。
微模块实际上是一种项目文件组织规范，并不是什么新技术，如下图所示：
不知道大家发现没有，其实编译性能慢的罪魁祸首就是：npm run serve 和 npm run build。当我们在执行 npm run serve 和 npm run build 的时候，都是全量编译 和 全量打包发布的。以前我们总觉得极致的去优化webpack配置达到解决编译慢的问题。其实我们可以考虑去做微模块。因为我们只有清楚的分清哪些是我们该编译，哪些不该编译的，才能真正找到性能编译慢的源头。
模块化按需编译
模块化部署发布，增量更新
实际上它就是通过Webpack UMD 方式打的包。这是非常普遍的模块共享方式
跨项目共享微模块 (支持配置 host 和 version)
最后我想说说 webpack5 module federation 模块联邦，目前看来我觉得它的场景可能更多是解决跨应用之间的共享模块，其实没有微模块灵活。我觉得应该会很少去跨应用共享某个单独的组件。然后在尝试了module federation 发现它没法去做 dynamic import（大家可以试试，如下图）。不过我觉得 webpack5 module federation 未来可期，必成大器！
webpack5-module-federation-for-vue 项目地址，欢迎尝鲜试玩：
webpack5 module federation 相关文章：
zhuanlan.zhihu.com/p/115403616
webpack5 module federation 官方组织：
如果觉得有点用，欢迎点赞、评论，谢谢🙏
