名词解释

注意事项

Modern.js Builder 已升级为 Rsbuild 独立品牌,当前文档将不再继续迭代。

  • 如果你在使用 Modern.js 框架,请直接访问 Modern.js 框架文档
  • 如果你在使用 Modern.js Builder 的 CLI 或 Node API,可以轻松迁移到 Rsbuild,请访问 Rsbuild 仓库 了解更多。

Bundler

webpackRspack 等模块打包工具。

打包工具的主要目标是将 JavaScript、CSS 等文件打包在一起,打包后的文件可以在浏览器、Node.js 等环境中使用。当 Bundler 处理 Web 应用时,它会构建一个依赖关系图,其中包含应用需要的各个模块,然后将所有模块打包成一个或多个 bundle。

Builder

Modern.js Builder 指的是 Modern.js 的构建层,它的目标是为 Modern.js 用户提供开箱即用的构建能力,并支持在 webpack 和 Rspack 间无缝切换。

Modern.js MAJOR_VERSION.46.0 之前版本使用的是 @modern-js/builder, 从 MAJOR_VERSION.46.0 开始升级为 Rsbuild

Builder Provider

Builder Provider 是 Builder 的组成部分之一,Provider 基于特定 bundler 实现了对应的构建能力。

目前 Builder 提供了两个 Provider:

  • @modern-js/builder-webpack-provider:底层基于 webpack 来实现。
  • @modern-js/builder-rspack-provider:底层基于 Rspack 来实现。

Micro-frontend

微前端(Micro-frontend,简称 MFE)是一种类似于微服务的架构,是一种由独立交付的多个前端应用组成整体的架构风格,它将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用,而在用户看来仍然是内聚的单个产品。

它主要解决了两个问题:

  • 随着项目迭代应用越来越庞大,难以维护。

  • 跨团队或跨部门协作开发项目导致效率低下的问题。

Module Federation

模块联邦(Module Federation,简称 MF)是 Webpack 的一个特性。它允许 JavaScript 应用从另一个应用动态加载代码,并在此过程中共享依赖关系。如果使用联邦模块的应用缺少联邦代码所需的依赖项,Webpack 将从该联邦的构建源下载缺失的依赖项。

这使得可以创建微前端风格的应用程序,多个系统可以共享代码,并在不需要重新构建整个应用程序的情况下进行动态更新。

Modern.js 提供了一个 Module Federation 的示例项目,请参考 module-federation-examples - modernjs

你也可以阅读 webpack Module Federation 文档 来了解更多概念。

Rspack

Rspack 是一个基于 Rust 的高性能 Web 构建工具,具备与 webpack 生态系统的互操作性,可以被 webpack 项目低成本集成,并提供更好的构建性能。

相较于 webpack,Rspack 的构建性能有明显提升,除了 Rust 带来的语言优势,这也来自于它的并行架构和增量编译等特性。经过 benchmark 验证,Rspack 可以带来 5 ~ 10 倍编译性能的提升。

Modern.js

Modern.js 是字节跳动 Web 工程体系的开源版本,它提供多个解决方案,来帮助开发者解决不同研发场景下的问题。

EdenX

字节跳动内部的 Web 工程方案,基于 Modern.js 实现。