推荐语： 如果想快速落地微前端，小编推荐优先使用EMP微前端方案，具体理由如下分析。
近几年微前端话题还挺火的，也看到了业界沉淀了微前端的实现方案，特别是qiankun，一直都是业界关注的点。但小编最近留意到Efox团队宣布开源一款新型的微前端方案---EMP微前端方案
官宣开源： https://juejin.im/post/6891532248269783054
github地址： https://github.com/efoxTeam/emp
wiki教程： https://github.com/efoxTeam/emp/wiki
image
一.为什么放弃了qiankun
qiankun是基于single spa 搭建的一套微前端生态，但在调研使用的过程中，发现了以下几点不足：
- 对于React 深度定制项目来说，无法做到状态管理很好的传递
- 对于非标准的AMD、UMD、SystemJS 等加载方式的库会存在依赖问题(需要针对性改造)
- 多框架实现体积过大以及存在一定的调试成本
- 对现有项目具有比较大的改造成本
基于这些问题，小编一直在找业界有没有更好一点的方案。直到在github上偶然逛到EMP微前端方案。
二.推荐尝试EMP方案的三大理由
1. 基于Webpack5 Module Federation
Module Federation [ˌfedəˈreɪʃn] 使 JavaScript 应用得以在客户端或服务器上动态运行另一个 bundle 的代码。
这其中的关键点是：
-
动态，包含两个含义：
-
按需，可以把一个包拆开来加载其中一部分；
-
运行时，跑在浏览器而非 node 编译时；
-
-
另一个 bundle 的代码，之前应用之间做共享是在文件级或 npm 包级 export 成员，现在可以在应用级 export 成员属性。
这样带来的好处是：
- js应用之间可以进行一些资源的共享，很适合做微前端
- 第三方依赖包的引入可以得到控制，从根本上释放了第三方依赖包的维护压力
因此，基于Webpack5 Module Federation去搭建生态的EMP微前端方案，会比基于single spa搭建的qiankun微前端方案来说，会显得更有底气，更加适应不同公司的业务。
（深入Module Federation原理学习可以点击这里）
2. 完善的脚手架生态
从EMP github上可以看到有这些丰富的脚手架和插件，以及针对react和vue主流框架的使用demo。
[图片上传失败...(image-7425e3-1604629294906)]
小编先帮大家体验一下使用感（激动得搓搓小手）：
首先，安装脚手架@efox/emp-cli：(@efox/emp-cli使用教程)
npm i -g @efox/emp-cli
// 或者: yarn global add @efox/emp-cli
执行emp init按照提示填写项目名称和选择template模板：
[图片上传失败...(image-85ae90-1604629294906)]
小编分别使用模板react-base和react-project生成empReactBase项目和empReactProject项目，这两个项目的根目录下，都有emp-config.js 文件，我们细看里面的配置：
比如empReactProject项目要使用empReactBase项目的一个UI组件，于是我们可以这样配置：
empReactBase项目暴露需要分享的组件资源出来：
[图片上传失败...(image-c3db91-1604629294906)]
empReactProject项目配置中引入empReactBase分享的资源：
[图片上传失败...(image-33b3d6-1604629294906)]
empReactProject项目使用empReactBase分享的资源：
[图片上传失败...(image-a3eb-1604629294906)]
于是我们访问empReactProject项目，就可以看到实际效果了。
另外，我们可以看到脚手架还有这些功能，具体使用可以参考教程：
[图片上传失败...(image-60f90-1604629294906)]
在初步使用中，体会到脚手架的功能是完整顺畅的，开发体验良好。而且官方在wiki中也阐述了一系列指导如何落地的教程文档的发布计划：
[图片上传失败...(image-fb131d-1604629294906)]
还挺期待这些教程的，比如针对react和vue项目如何落地，特别是cocos2d 这种不使用react和vue的项目如何进行资源共享，小编赶紧star一波，期待更新。
3. 落地了多个线上项目，接入零成本
从EMP微前端方案中Awesome，可以看到有该团队已经在公司内部成功落地了多个线上项目。
值得关注的话，接入的方式，几乎等于零成本！！！
私信了解到，这些Awesome案例，花费的接入时间非常短暂，而且不需要对现有项目做大改动，只需要引入EMP的配置，就可以收获微前端带来的价值硕果，收益显著。
看到这么多落地项目效果不错，可见该EMP微前端方案可执行度高，落地难度小且速度快，适合想快速拥抱微前端的团队使用，这也是小编推荐的重要原因之一。
网友评论