名词解释

BFF

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

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

Bundler

webpackRspack 等模块打包工具。

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

Builder

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

Modern.js 2.46.0 之前版本使用的是 @modern-js/builder, 从 2.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 编写的高性能 JavaScript 打包工具, 它提供对 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 插件。