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

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

背景

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

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

改造

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

EMPShare

image.png

站群架构

image.png

版本对比

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

速度对比

2.0 EMPShare1.0 Module Federation提升
Antd800ms16s20倍

项目生态

image.png

开始

安装

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

相关导读

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改