这才是最完美的微前端方案

推荐语： 如果想快速落地微前端，小编推荐优先使用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微前端方案可执行度高，落地难度小且速度快，适合想快速拥抱微前端的团队使用，这也是小编推荐的重要原因之一。