名词解释

BFF

BFF 是 "Backend For Frontend"(前端的后端) 的缩写。它是一种架构模式,表示为前端应用程序创建一个专门的后台服务。

BFF 服务作为前端应用程序和服务端 API 之间的中介,可以为前端提供定制的 API 供其使用。这允许前端开发者对需要的数据和功能有更多的控制,而不必依赖后端服务提供相应的能力。

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

CSR

CSR 是 "Client-Side Rendering"(客户端渲染)的缩写。它表示页面是在浏览器中通过 JavaScript 渲染的,数据获取、模板和路由等逻辑都在浏览器端完成,而不是在服务器上。

在 CSR 中,服务器会向浏览器端发送一个空的 HTML 外壳和一些 JavaScript 脚本,然后由浏览器端从服务器的 API 中拉取数据,并将动态内容渲染到页面中。

Garfish

Garfish 是一套微前端解决方案,主要用于解决 web 应用的跨团队协作、技术体系多样化等问题。

它从架构层面出发,将多个独立交付的前端应用组成整体,这些前端应用能够独立开发、独立测试、独立部署,但是在用户视角仍然是内聚的单个产品。

Micro-frontend

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

它主要解决了两个问题:

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

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

Module Federation

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

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

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

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

Rsbuild

Rsbuild 是一个基于 Rspack 的 web 构建工具,它的目标是为 Rspack 用户提供开箱即用的构建能力,使开发者能够在零配置的情况下启动一个 web 项目。

Rsbuild 集成了社区中基于 Rust 的高性能工具,包括 Rspack 和 SWC,以提供一流的构建速度和开发体验。

Rspack

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

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

SSR

SSR 是 "Server-Side Rendering"(服务器端渲染)的缩写。它表示由服务器生成网页的 HTML,并将其发送给客户端,而不是只发送一个空的 HTML 外壳,并依赖 JavaScript 来生成页面内容。

在传统的客户端渲染中,服务器会向客户端发送一个空的 HTML 外壳和一些 JavaScript 脚本,然后从服务器的 API 中获取数据,并用动态内容填充页面。这会导致页面的初始加载时间较慢,不利于用户体验和 SEO。

使用 SSR 后,服务器会生成已经包含动态内容的 HTML,并将其发送给客户端。这使得首屏加载速度更快,并对 SEO 更加友好,因为搜索引擎可以爬取到渲染后的页面。

SSG

SSG 是 "Static Site Generation"(静态网站生成)的缩写。它表示网页被预先渲染成静态的 HTML,然后直接提供给客户端,而不需要服务器实时生成 HTML。

在传统的 SSR 中,每当用户请求一个页面时,服务器就会实时生成 HTML。有了 SSG,HTML 可以在构建过程中被提前生成,并被托管在 CDN 或其他静态资源服务中。

与传统的 SSR 相比,SSG 可以提供更快的加载速度以及更少的服务端开销,因为不需要维护一个服务器来实时生成 HTML。然而,SSG 不适合需要动态内容的网站,因为 HTML 是在构建过程中生成的,不支持实时更新。

SWC

SWC (Speedy Web Compiler) 是基于 Rust 语言编写的高性能 JavaScript 和 TypeScript 转译和压缩工具。在 Polyfill 和语法降级方面可以和 Babel 提供一致的能力,并且性能比 Babel 高出一个数量级。

Modern.js 提供了开箱即用的 SWC 插件,可以为你的 Web 应用提供语法降级、Polyfill 以及压缩,并且移植了一些额外常见的 Babel 插件。