EMP 2.0 - 构建完善的微组件化生态闭环

背景

经过2年时间沉淀开发，21个beta版本的迭代，我们下沉了 EMP v2的版本发布，主要是解决一下几个问题

• webpack5 总体打包体积过慢、开启缓存并没有很少解决当前问题
• module federation 涉及到 single 与 eager 的问题，横向共享增加会加大体积与构建复杂度
• 项目配置过于松散，不利于后续迭代升级
• typescript、tsconfig、dts 实现过于简陋
• 与微前端跨框架、状态解决方案混淆比较严重，后续统筹微组件，EMP 解决的是项目解耦而不是多系统聚合

改造

• 引入 swc 替换到 babel 结合 webpack5 起到比较感人的加速作用、重写loader，让构建更好的定制化对于ESM 后续会考虑引入esbuild 做进一步升级
• 引入 EMPShare 三级共享模型 替代传统的 module federation 逻辑对于 cdn命中、体积、以及构建速度起到质的变化
• 支持 ESM 开发
• 实现多页面配置化支持，支持配置继承
• 深度基于Typescript定制功能如 tsconfig.json 与 类型同步集成到 emp

EMPShare

站群架构

版本对比

	2.0	1.0
配置	统一配置	基于webpack chain
构建、压缩	rust [压缩有bug回滚，后续观察切换]	js
微前端	emp share	module federation
esm	✔️	❌
esm共享	✔️	❌
库模式	✔️	❌
多页面模式	✔️	❌
d.ts同步协助	一件生成同步	需要插件介入

速度对比

	2.0 EMPShare	1.0 Module Federation	提升
Antd	800ms	16s	20倍

项目生态

开始

• 开发文档

安装

npm add @efox/emp --dev
yarn add @efox/emp -D
pnpm add @efox/emp -D

指令

"scripts": {
  "init": "emp init",
  "dev": "emp dev --env dev",
  "build": "emp build --env prod",
  "build:ts": "emp build --env prod -t",
  "start": "emp serve",
  "analyze": "emp build --analyze"
},

emp init

创建 emp 模板项目 目前可选模板:

• vue2_base
• vue2_project
• react_base
• react_project

总结

• 得益于 webpack的更新以及 swc的引入，整体的项目模型得以深化和演变，更加符合多人开发和共享的模型。
• 得益于 项目与社区的反馈以及意见收集 让我们看到了更多实现的可能性
• 最后 感恩与我们一起成长的同学们，来自 2021的年度总结

作者

Ken

相关导读

• 《EMP面向未来微前端方案正式开源了》
• 《微前端 Emp 的 2020》
• 《欢聚变色龙回顾2020》