EMP3.0-基于Rust生态打造的高性能前端构建系统

重构背景

EMP的诞生初衷是为了解决前端构建工具在性能方面的挑战。在团队维护多个大型应用的过程中，我们遇到了构建时间长、性能瓶颈等问题。尽管Webpack为我们提供了强大的功能和灵活性，但在处理巨石应用时，其性能优化的空间已经非常有限。我们意识到，为了满足日益增长的性能需求，我们需要从根本上改变构建策略，这包括从底层技术到工具链的全面升级。

重构目标

• 性能显著提升：EMP的核心目标是显著提高构建性能。通过从Webpack切换到基于Rust的高性能构建引擎rspack，我们旨在减少构建时间，同时优化产物体积。
• 适应现代开发环境：随着Node.js 20 LTS的发布，EMP紧跟技术发展的步伐，升级了构建环境，确保了与最新技术的兼容性，同时停止了对旧版本的维护，以避免潜在的安全风险和性能问题。
• 微组件化与业务场景适配：EMP致力于通过微组件化，使新老项目能够无缝集成，无需对现有项目进行大规模改造。这种灵活的适配策略使得微前端架构能够更好地服务于多样化的业务需求。
• 模块化方案优化：EMP进一步优化了对现代浏览器的支持，通过ESM和MF的新特性，实现了模块的按需加载和本地开发服务的按需构建，从而提升了用户体验和开发效率。
• 持续的性能探索：我们将持续探索并采用更高性能的算法和技术，包括并发处理、多核处理、高效的缓存策略和插件通信机制，以确保EMP在性能方面的持续领先。
• 团队合作与共享：EMP已经在团队内部的多个项目中得到应用，并取得了显著的成效。我们期望与更多的团队合作，将EMP打造成为前端开发的标准配置，共同推动前端技术的进步和团队协作的高效性。

生态架构

• Rspack：Rspack是一个基于Rust的构建工具，它利用Rust语言的内存安全和并发处理能力，为前端构建过程带来了革命性的改进。Rspack的高性能特性意味着它能够在极短的时间内处理大量的代码，从而显著减少构建时间。此外，Rspack的设计理念注重资源优化，使得它在运行时占用的内存和CPU资源更少，这对于大型项目和持续集成环境尤为重要。
• new Module Federation：new Module Federation是在原有的Module Federation基础上的一次重大升级。它引入了运行时插件功能，使得开发者能够扩展模块联邦的行为和功能，实现控制反转。并且new Module Federation对跨多框架(如Vue,React)，跨多版本框架(React16、React18)，提供了更完备的运行时解决方案。这意味着开发者可以更加灵活地管理和共享代码模块，无需担心版本冲突和依赖问题。
• Lightning CSS：Lightning CSS是一个由Rust编写的CSS处理工具，它的性能远超同类基于JavaScript的工具。据测试，Lightning CSS能够在单线程上每秒压缩超过270万行代码，这使得它在处理大型CSS项目时具有显著的速度优势。Lightning CSS的设计初衷是追求极致的性能，它通过高效的内存使用和有限的AST遍历来实现这一目标。这使得Lightning CSS在处理CSS时不仅速度快，而且输出的代码质量高，为开发者提供了更加流畅的开发体验。
• Biome: Biome是一个基于Rust高效的格式化程序，支持JavaScript、TypeScript、JSX和JSON，与Prettier有高达97%的兼容覆盖率。这使得开发者能够快速统一代码风格，提高代码的可读性和可维护性。Biome也是一个高性能的linter，适用于JavaScript、TypeScript和JSX，它集成了超过200条来自ESLint、TypeScript ESLint和其他来源的规则。这些规则可以对代码进行静态分析和错误检查，帮助开发者发现并解决潜在的问题，从而提升代码的质量和可靠性。

落地成效

接入成本

• 兼容webpack架构和生态，改造便捷省力
• EMP2.0 项目无缝升级
• 侵入性为零，不污染应用原本逻辑
• 微前端方案复用成本低 ，不局限于框架与版本使用，通用性高

详细接入流程请见官方文档

与EMP2.0成效对比

同一项目分别使用 EMP3.0 与 EMP 2.0 在 js 编译 与 css 编译上的数据对比

基于 Rust 和 Rspack 的高度并行、增量编译架构，JS构建速度快，带给你极致的开发体验。

指标	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

基于 LightningCSS 编译 CSS，构建速度显著提升，体积减少。

指标	EMP v3 (LightningCSS)	EMP v2 (PostCSS)
构建时间	8ms	1088ms
产物大小	278kb	312kb

三级共享成本优势

EMP3.0将结合new Module Federation设计出新的3级共享,老业务可以无缝升级，业务改造成本接近0。

在现代前端开发中，模块化和代码复用是提高开发效率和性能的关键因素。随着Module Federation等技术的兴起，共享逻辑已成为前端架构设计中的一个重要概念。然而，尽管Module Federation模块提供了CDN缓存复用的可能性，但在实践中，其复用率并不总是达到预期效果。为了解决这一问题，我们引入了三级共享策略，该策略在共享的基础上进一步下沉公共基础库，从而实现了显著的成本优势。

• 减少构建时间：通过三级共享，我们可以将公共基础库的构建和更新频率降低，因为这些库是多个应用共享的。这意味着，当基础库更新时，只需要构建一次，然后所有依赖这些库的应用都可以复用这些变更，而不需要再次进行完整的构建过程。这样的策略显著减少了整体的构建时间。
• 减小项目体积：通过下沉公共基础库，我们可以减少每个应用需要打包的代码量。这是因为基础库中的代码只会被打包一次，然后在所有应用中复用。这样不仅减少了每个应用的体积，也降低了加载和解析这些代码的时间，从而提升了应用的加载速度。
• 提升访问速度和CDN命中率：当公共基础库被共享并下沉后，它们可以被CDN缓存。这样，当用户访问应用时，这些库可以直接从CDN获取，而不需要从服务器下载。这不仅提升了访问速度，也提高了CDN的命中率，因为相同的库会被多个应用复用。
• 超前布局：三级共享策略同时支持UMD（Universal Module Definition）和ESM（ECMAScript Modules）这两种模块系统。UMD兼容各种环境，使得共享的代码可以在不同的加载器和环境中无缝工作。而ESM作为下一代模块系统，它具备启动速度快、编译成本低的特点。这种超前布局使得我们的共享方案不仅适用于当前的开发环境，也为未来的技术变革做好了准备。
• 共享逻辑更直观：通过将共享逻辑进一步下沉到基础库，我们简化了应用之间的依赖关系。这种直观的共享策略使得开发者更容易理解和维护代码，同时也减少了因为模块版本不一致而导致的潜在问题。

三级共享策略通过减少构建时间、减小项目体积、提升访问速度和CDN命中率，以及支持UMD与ESM的超前布局，为前端项目提供了一套更加高性能的共享方案。这种策略不仅提高了开发效率，也为应用的性能优化和未来的技术升级提供了坚实的基础。

生态拓展

EMP-proxy

基于EMP 3.0打造极致的开发体验，在传统Hybrid App开发过程中，往往需要本机设置HOST，并且使用Charles、Fiddle、ProxyMan等工具开启代理服务，供客户端调试使用。

EMP-proxy，提供开发环境代理服务，结合 EMP 3.0 配置，可以不修改host或配置其他网络代理的情况下，在APP/PC客户端 内调试一切以cookie作为鉴权校验( SameSite=Lax ) 的http服务。

EMP-debug

基于EMP 3.0打造极致的开发体验，在传统Hybrid App开发过程中，往往需要APP开放权限并物理连线来调试Hybrid App。 EMP-debug，提供CDP代理服务，结合 EMP 3.0 配置，无需物理连线，直接在可视化平台中选择在线项目，使用DevTool Debug对页面进行调试。

EMP-adapter

EMP-adapter是一款基于new Module Federation运行时远程模块架构构建的前端适配器。它旨在解决不同前端框架之间的兼容性问题，并实现跨版本组件的共享。通过EMP-adapter，开发者能够在React、Vue等流行的前端框架之间无缝地共享和集成组件，而无需担心底层框架的差异和版本兼容性问题。

通过EMP-adapter，开发者可以轻松地将React组件导入到Vue项目中，或者将Vue组件导入到React项目中，而不需要对原有组件进行大量的修改。这种跨框架的组件共享能力极大地提高了代码的复用性，减少了重复劳动，同时也加快了新功能的开发和迭代速度。

结语

EMP3.0，作为EMP微前端解决方案的最新迭代，带来了一系列创新和改进，旨在为开发者提供更高效、更强大的前端开发体验。本次升级，EMP3基于Rspack、new Module Federation、Lightningcss、Biome等前沿技术进行重构，实现了性能的飞跃性提升和功能的全面扩展。

作者

|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Ken | xiaoming | ron0115 | CWH0908 |