1 背景

@empjs/cli@3.0.0已正式发布，相关插件3.0.0版本也已正式发布。插件总览

发布《EMP3.0-基于Rust生态打造的高性能前端构建系统》后，EMP3.0经过了两个月不断实战打磨已发布正式版本，目前EMP3.0已经具备企业级项目使用的条件。

1.1 现有项目落地情况

EMP3.0在两个多月时间里已有落地YY互动直播项目19个（含8个已有项目升级改造）。覆盖多种类型项目，其中包含近30万行代码的模版工程、常规季度月度的活动项目、以及常驻的功能性项目与玩法项目等。

其他改造的旧项目（基于EMP2.0）在落地过程中均有可观的性能提升，举例：

指标	EMP 3.0	EMP 2.0(SWC)	EMP 2.0(BABEL)
冷启动（dev）	3.8s	31.3s	42.6s
热更新（根模块变动）	570ms	1.7s	1.75s
热更新（叶子模块变动）	560ms	1.5s	1.6s
冷构建	22s	75s	160s

1.2 当前版本完成度

为了确保版本稳定性，依赖的rspack版本锁定在0.7.0。

1.2.1 性能跃进--基于Rust生态

EMP3.0构建层从2.0的webpack、babel、eslint、postcss全面升级改造为rust生态工具支撑，性能得到了巨大的提升。

1.2.2 更轻量的产物--EMP FastMode

EMP FastMode是新的共享模式，对比起简单的Module Federation Shared，在EMP3启动项目之中，使用FastMode后能让启动项目构建后包体积减少76%，模块索引体积减少74%。

未启用fastMode：

启用fastMode：

FastMode比传统Module Federation Shared包体积小的原因是，FastMode结合federation runtime提取公共依赖到EMPShareLib，并进一步把远程模块公共运行时依赖的module-federation/runtime与sdk提取出来。

详情请见emp-show-case

git clone https://github.com/empjs/emp-show-case.git
cd emp-show-case
pnpm i
pnpm run dev 

浏览器访问http://localhost:4002/

此demo展示了EMP FastMode减少包体积能力，与EMP Adapter把EMP项目组件跨React版本反复调用的能力。

1.2.3 EMP Adapter

落地到现有项目，是EMP3.0实践指标的重要一环。现有项目可以是不限制前端技术栈以及对应的技术栈版本，如用EMP3.0开发的React18组件用使用在基于React16的现有项目，或用到现有的Vue2项目。

EMP3在Runtime提供了EmpShareLib，EmpShareLib集成了Module Federation 2的运行时注册组件与运行时加载组件功能，并提供了withReactAdapter高阶组件让子组件可以通过指定版本的React实例去渲染。

EMP3实现了前端组件跨框架跨版本的便捷调用，为EMP3.0落地在现有的老旧项目提供了桥接的方法。

详情请见emp-show-case

1.2.4 lightning css使用介绍

使用说明

lightning css是基于rust开发的样式压缩与样式转换工具，是post css工具的平替，经过多个项目的实际测试，相同条件下去处理样式，lightning css只需要1% post css所使用的时间。

在 EMP3.0 中实现对 autoprefixer、rem 和 vw 单位转换的支持时,需要注意以下几点:

• Autoprefixer 支持:

  • EMP3.0 已经包含对 autoprefixer 的支持,以确保生成的样式可以在不同浏览器环境下正常工作。

• rem 和 vw 单位转换:

  • EMP3.0 需要支持将 px 单位转换为 rem 和 vw 单位,以适应不同的屏幕尺寸和分辨率。

• 单位转换的大小写无关性:

  • 与 PostCSS 不同,EMP3.0 的 LightningCSS 在处理样式单位时不区分大小写。
  • 这意味着无法通过将 px 改写为大写 PX 来忽略单位转换。

• 特殊场景的处理:

  • 为了解决在某些业务场景中需要使用不转换的 1px 的情况,EMP3.0 引入了 ipx 这个特殊标识。
  • 当使用 ipx 时,LightningCSS 会排除对该单位的转换处理。
  • ipx 这个标识应该是可配置的,以适应不同项目的需求。

1.2.5 biome 使用介绍

使用说明

biome比传统的eslint与prettier组合快35倍以上，并且支持250多条eslint规则，对prettier有97%兼容，让现有项目可以低成本地无缝升级。

• Biome 作为间接依赖:

  • 当 Biome 被作为团队规范包的一部分引入时,它不会像 ESLint 和 Prettier 那样被安装到顶级 node_modules 目录。
  • 这意味着 Biome 无法在项目中正常运行,因为它无法被正确解析和加载。

• .npmrc 配置:

  • 为了解决这个问题,需要在 .npmrc 配置文件中,将 Biome 的依赖关系提升到根目录依赖的标识配置中。
  • 这样做可以确保 Biome 被正确安装和解析,从而在项目中正常运行。

• ESLint 和 Prettier 的默认配置:

  • 相比之下,ESLint 和 Prettier 是默认配置,因此不需要进行任何特殊的配置就可以正常工作。

2 项目使用

下文指引如何在现有的项目中使用EMP3.0或如何创建一个全新的EMP3.0项目。

2.1 在现有项目使用EMP3.0

现有项目中使用EMP3.0项目，可参考

• emp-show-case/projects/mf-host
• emp-show-case/projects/emp-runtime-react-16-app

此demo演示了如何在已有的React16项目中使用EMP3.0开发React18项目进行老项目迭代。

在第三季度，我们将会另出一篇推文详细介绍EMP Adapter方案，敬请期待。

运行项目：

git clone https://github.com/empjs/emp-show-case.git
cd emp-show-case
pnpm i
pnpm run dev 

浏览器访问http://localhost:4002/

2.2 新项目使用EMP3

create-emp提供快捷指令创建EMP3.0新项目。

执行

npm create emp@latest

创建新项目。

第一次使用控制台会出现以下提示：

输入y回车继续执行

输入新建文件夹完整路径如：

/Users/username/Documents/work/create-emp

选择框架完成新项目创建。

3 总结

• 性能提升:

  • 基于 rspack 的卓越性能,EMP3.0 可以大幅提升应用的构建和运行速度,为企业级项目带来显著的性能优势。

• EMP FastMode 共享模式:

  • EMP FastMode 新的共享模式,可以进一步优化微前端应用的加载和渲染效率,提升用户体验。

• EMP Adapter 跨框架跨版本能力:

  • EMP Adapter 提供了跨框架和跨版本的适配能力,大大增强了 EMP3.0 在微前端领域的适用性和灵活性。
  • 这为新一代微前端开发带来了无限的想象空间,可以更好地满足企业级项目的复杂需求。

• 企业级项目落地:

  • 通过大量实战项目的验证,EMP3.0 已经具备了企业级项目落地的条件,可以为企业提供稳定、可靠的微前端解决方案。

• 可扩展性和可配置性:

  • EMP3.0 应该提供良好的可扩展性和可配置性,以适应不同项目的特定需求,如特殊单位转换场景的定制化处理。

总的来说，EMP3.0 在性能提升、共享模式优化、跨框架跨版本适配等方面的成果，为微前端开发带来了新的可能性,并为企业级项目的落地提供了有力的支撑。未来 EMP3.0 还可以进一步提升可扩展性和可配置性,为更多企业级应用提供优质的微前端解决方案。

3.1 作者

Ken	xiaoming	ron0115	CWH0908