从Webpack到Rspack

最近准备跟随若川大佬，迁移博客，由原本的Hexo，转到Rspress.

才发现发现前端打包库如此之卷，

vite还没用起来，恍惚间好像听过Turbopack等名词，Rspack又是何方神圣。

遂准备梳理一下，作为迁移到Rspress编写的第一篇文章。

Webpack

前端打包库: 将前端项目中的各种资源打包整合成可以在生产环境中高效运行的代码

模块化: 依托于前端打包库和模块化规范，让前端编码可以拆分成多个模块

静态资源: 通过loader机制将其他资源转换为webpack可处理的资源，供程序调用

    css 图片 字体文件 Html 模板文件

代码优化: 代码压缩 TressShaking 缓存继制(哈希值持久化缓存)

开发环境支持: 热更新(代码实时更新无需刷新页面)，开发服务器(本地运行项目，请求代理)

插件: 更多扩展功能，自动生成HTML(HtmlWebpackPlugin)，提取公共代码

webpack 插件和 loader

Rspack

最近发现最快的打包工具变成了Rspack

打包工具/打包库/bundler 是前端工程化/前端脚手架的最核心技术栈

用于将前端项目进行各种加工，编译打包成一个整体。

为什么打包工具会一再升级

其实我们在开发的过程中也早就体会到了，我们代发的前端项目要跑起来还是比较慢的

这是一个应用在不断的积累过程中不可避免的。

为了解决这个痛点，打包工具的升级在所难免。

现在我们有了一个新的契机

浏览器开始原生支持ES模块(2017)

以前webpack开启本地服务，需要进行一个整体的预编译，

干了三件事， 依赖解析， 整体代码转换, 模块打包输出

拥有了浏览器对ES模块的原生支持这一机制之后，

vite可以直接开启本地服务，不做任何预编译，

随后开发者在浏览器输入localhost:3000，向vite本地服务发起请求，

vite直接调用对应模块，对模块按需编译为ES6模块，发送给浏览器，浏览器执行输出，

这个过程无需整体进行依赖解析和优化，无需对整体代码先进行一次编译打包，

所以快的不是一点半点，快到没朋友。

ES 模块的原生支持：Vite 利用浏览器对 ES 模块的支持，直接在开发环境中加载代码，无需传统的模块打包流程，省去了依赖分析等复杂处理。
按需编译：Vite 只编译被实际引用的文件，未使用的模块不参与编译。这减少了冗余计算，开发时的编译速度较 Webpack 快。
轻量化开发服务器：Vite 构建在现代浏览器功能上，开发服务器实现了快速的热更新，比 Webpack Dev Server 更轻量。

但是vite依旧有自己的局限性

我们可以看到vite的提升仅仅实在本地运行的方面，

在生产构建（build）阶段，

Vite 则使用 Rollup 进行传统的模块打包，处理优化、代码分割和依赖打包等工作。

因此 Vite 的构建速度提升并不如开发速度显著。

它的构建效率依然依赖于 Rollup 的优化策略，适合中小型项目的大多数构建需求，

但对于大型项目，构建速度的提升并没有像本地开发中那样明显。

可以看到，vite在项目打包上依旧处于旧时代，这个时候我们都在期待一个新的风暴出现

随后， WebAssembly 出现了

WebAssembly 与 JavaScript 生态结合(2018)

W3C（World Wide Web Consortium，万维网联盟）又开始搞事情，

2018 年 WebAssembly (Wasm) 标准发布，使得多种编程语言（包括 Rust）可以编译成浏览器中高效运行的二进制代码。

Rust 社区率先开始支持编译到 WebAssembly，催生了一批将 Rust 与 JavaScript 结合的应用.

Rust的优势

Rust 是一门系统编程语言，拥有极高的性能，接近 C 和 C++。

高性能和内存安全

它通过严格的内存管理和所有权系统，避免了常见的内存泄漏和数据竞争问题。

对于 JavaScript 工具链中的打包、压缩、编译等高计算需求任务，Rust 能显著加快处理速度，同时保证稳定性。

并行和多线程处理

Rust 提供了对多线程并行编程的高效支持，这对于大型 JavaScript 项目中的复杂依赖解析、增量构建等任务非常有利。

Rust 可以编译为 WebAssembly

Rust 作为 JavaScript 构建工具链中的一种常用底层语言，已被广泛用于编译、打包、转译等工具中，成为提升 JavaScript 开发体验和性能的关键技术。

Turbopack：Rust 助力的高性能构建

Turbopack 是 Vercel 推出的下一代打包工具，其性能优于 Webpack，关键在于以下几点：

Rust 实现：Turbopack 使用 Rust 编写，利用了 Rust 的高效内存管理和并行计算，显著加速了打包速度。
增量编译和惰性加载：Turbopack 会对已编译内容进行缓存，只重新打包更改的部分，减少重复工作。
Webpack 兼容性：Turbopack 能兼容 Webpack 插件和配置，这使得项目迁移成本较低，开发者可以平滑过渡到新工具。

Turbopack 将 Rust 的性能优势引入构建工具，实现了比 Webpack 更快的打包速度和更灵活的增量编译方案。

Rust 在前端构建工具中的优势

Rust 编写的打包工具能够很好地应用于 JavaScript 项目，得益于以下特性：

内存管理与无垃圾回收：Rust 的内存管理机制提高了内存利用效率，无需垃圾回收（GC），适合资源密集型的打包任务。
并行计算能力：Rust 支持多线程，能并行处理大量构建任务，提高了打包速度。
优化能力：Rust 编译时的深层次优化，使其生成的打包工具具备高效的性能表现。

这些特性使得 Rust 构建工具在面对大型项目时更为高效，并且能够生成与 JavaScript 兼容的输出文件，开发者可无缝集成。

Rspack 的极致性能优化

Rspack 是字节跳动基于 Rust 开发的 Webpack 替代工具，结合了高性能和 Webpack 生态兼容性。其速度优势在于：

完全的 Rust 编写：Rspack 完全采用 Rust 实现，提升了资源编译速度和管理效率。
多线程并行处理：Rspack 使用 Rust 的多线程处理能力并行编译多个模块，提高了构建速度。
Webpack 生态兼容：Rspack 支持 Webpack 插件和配置，实现了性能和兼容性的平衡，便于迁移。

Rspack 兼具速度和兼容性优势，是更适合大型项目和需要加速构建的场景的高效选择。

总结

工具	发布时间	开发者	加速方式	核心语言	速度表现
Webpack	2012年	Tobias Koppers	-	JavaScript	较慢
Vite	2020年	尤雨溪（Evan You）	ES 模块支持、按需编译	JavaScript	较快
Turbopack	2022年	Vercel	增量编译、惰性加载、Rust 性能	Rust	较快
Rspack	2023年	字节跳动	全面 Rust 优化、多线程并行	Rust	最快

待更新

SSG（Static Site Generator，静态站点生成器）

最常见的用法是作为内部文档生成工具，以及个人静态博客建站

一些稍复杂的文档项目，有以下痛点

构建性能。保证足够快的启动速度，带来良好的开发体验。
MDX 支持。通过 MDX，我们可以方便地复用文档片段，以及在文档中渲染自定义的 React 组件。
文档站基础能力。包括国际化、多版本支持、全文搜索、组件库文档等。
可扩展性。内置插件系统，支持通过插件 API 来扩展框架功能。

当项目越来越庞大，团队成员时常苦恼于冗长的项目启动时间，开发体验因此受到了一些负面影响，并且项目开发的时间越长，这种体验的劣化就越为明显。

如何突破现有 SSG 框架的性能瓶颈

Rspack 是一个基于 Rust 的 Bundler，内置多种性能优化手段，比如多线程并行编译、增量编译等等，相比社区传统的打包工具，有 5～10 倍的性能提升。

Markdown 编译器。对于 SSG 框架中另一大编译性能瓶颈，即Markdown 编译，我们也将这一流程 Rust 化以进一步提速，定制出 Rspress 的 Markdown 编译器（即@rspress/mdx-rs）。这款编译器相比社区的 JS 版本的编译器，有近 20 倍的性能提升

vite

哈希值持久化缓存，回头根据知乎回答写一个

webpack优化，回头写一个(例如，HtmlWebpackPlugin)

从Webpack到Rspack#