本文介绍了微前端的概念，解释了为何采用微前端的原因，如避免繁琐的更新流程和提高构建速度。文章详细阐述了如何使用webpack5的Module Federation特性结合vue3.0搭建微前端环境，包括创建文件夹、安装依赖、配置webpack等步骤，并展示了如何实现组件的创建、导出和跨项目引用，以实现微服务。最后，文章提及了微前端的基本概念和工作原理。
项目源码地址：
https://github.com/wuxiaohuaer/webpack5-vue-admin
一、什么是微前端
微前端是一个比较宏观的概念，他的核心就是独立，开发独立、部署独立，比较适合大的团队来进行重量级项目开发。
从Micro Frontends 官网可以了解到，微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍然聚合为一个产品出现在客户面前。可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。
二、为什么要用微前端？
一个公司有多个类似的项目，大家可能会共用一个dialog组件，那我们可以封装起来，以便其他的项目一起使用。
这个时候大家会有一个疑问，直接打包放在npm上不就完了，为什么要用微前端这么复杂的东西？
我们把公用的组件打包以后上传到npm包管理器上，确实可以让公司的其他项目一起使用，但是会有两个弊端。
1、程序繁琐
开发三个管理后台应用项目，将相同的业务子模块抽离成npm包方式，这时候，如果要更新该业务子模块的逻辑时，那么需要做以下的流程操
订阅专栏 解锁全文
扫一扫
6227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
