阅读 1637

前端微模块更值得被推崇!

微前端最近已经很火了,最近跟着火的还有 webpack5 module federation 了,想必大家都有耳闻了。但是我今天主要讲的是微模块,我觉得它更值得被推崇。

微模块的优势如下:

  • 模块化按需编译
  • 模块化部署发布,增量更新
  • 跨项目共享微模块(支持配置 host 和 version)

 微前端 和 微模块 的区别,👇请看下图所示。

微前端架构

微前端架构更多的是解决不同应用 或 不同技术栈之间的共存方案

微模块架构

微模块架构更多的是解决同一应用技术栈内模块编译、打包,以及共享模块的方案。


微模块实际上是一种项目文件组织规范,并不是什么新技术,如下图所示:


不知道大家发现没有,其实编译性能慢的罪魁祸首就是:npm run servenpm 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 项目地址,欢迎尝鲜试玩:

github.com/lisiyizu/we…

webpack5 module federation 相关文章:

zhuanlan.zhihu.com/p/115403616

mp.weixin.qq.com/s/WAYezuzMK…

webpack5 module federation 官方组织:

github.com/module-fede…


如果觉得有点用,欢迎点赞、评论,谢谢🙏