Rspack 学习了解

简介: Rspack 学习了解

一、简介

  • Rspack GitHub 仓库Rspack Quick start
  • Rspack 是由字节 ByteDance Web Infra 团队基于 Rust 语言开发的 Web 高性能构建工具
  • Rust 是种高效、可靠的通用高级语言。其高效不仅限于开发效率,执行效率也是令人称赞的,属于少有兼顾开发效率和执行效率的语言。
  • Rspack 目前支持 ReactVueSvelteSolidNestJS, Angular 初步支持,还缺失很多能力,其他还包括 StorybookModern.jsModern.js Doc 等。

二、特点

  • 优点
  • 启动速度:基于 Rust 实现,构建速度极快。
  • HMR(热更新):内置增量编译机制,HMR 速度极快,完全胜任大型项目的开发。
  • 兼容 webpack 生态:针对 webpack 的架构和生态进行兼容,无需从头搭建生态。
  • 内置常见构建能力:对 TypeScriptJSXCSSCSS ModulesSass 等提供开箱即用的支持。
  • 默认生产优化:默认内置多种优化策略,如 Tree Shaking代码压缩 等等。
  • Build 性能:取得了 5~10 倍编译性能的提升。

  • 缺点
  • Loader 支持有限, Plugin 目前主要靠内置,高级点的使用都比较麻烦或者支持有限,内置后配置都比较简单。
  • 更适合庞大的项目,这样运行速度、Build 速度都能保持在 webpack5-10 倍,对中小项目提升有限。
  • 只支持 nodejs 14 以上的项目迁移。

三、性能对比

  • 工具对比

  • 字节内部项目迁移后的收益

四、架构设计

  • 主要围绕4方面,附架构图
  • 核心架构脱胎于 Wabpack5
    因为 Wabpack 历经了多年的考验,它整体架构稳定性是非常高的。
  • 基于 Native 语言的高并发框架
    Rust 本身是一门 Native 语言,相比 JS 这种动态语言可以做非常高的优化,性能瓶颈更高,虽然 JS 语言在 V8 的一些优化上已经不错了,但是它的短板来自于对多线程的支持,且在实现多线程后所带来的收益远低于 Rust
  • 基于 RustBabel 代替品 SWC
    Webpack 大部分的生态都是基于 LoaderPlugin 扩展的,主要点在 Loader,传统的工具都是用 Babel Loader 去做的,但 Babel Loader 是比较慢的,所以 Rust 使用了 SWC 来代替,SWC 相比 Babel 带来的性能提升做了比较高的贡献,所以在开发 Rspack 时可以避免掉 Babel Loader 的使用。
  • 基于 NAPI-RSRustJS 的高效通信
    核心用 Rust 写的,但是插件扩展是 JS写的,一方面有些开发者还得学习 Rust 才能做插件开发,上手成本比较高,另一方面是 JS 本身有个动态化特性,能直接在用户侧去编写并被加载执行,由于 Rust 是一门 Native 语言,做动态化是远不如 JS 的,即使使用 Rust 开发了一个插件,编译后的产物也是一个 Native CodeNative Code操作系统CPU 等是强相关的,比如在 Windows 上编译出来的插件在 Mac 上是跑不起来的,如果想做这种 Native 插件的动态分发或加载是比较困难的,需要熟悉整套跨平台编程的知识,每一个插件可能需要编译出来很多个平台的产物,然后再分发到不同平台上去,这个门槛比较高且稳定性也不容易控制。

五、迁移原则

  • 一条原则,优先使用内置能力,这样能保证性能最优化,比如不要使用 Babel Loader 相关的能力,常用的 Babel 能基本已经内置,如果一定需要使用,也需要将影响控制在很小范围内,如果大规模使用可能 Rspack 的性能就会下降比较明显。
  • css 相关,webpack 一般是使用 style-loader、css-loader 做处理,但是 Rspack 使用 SWC 实现了 experiments.css,默认开启,所以建议使用内置 css 能力,而不是去使用这些 Loader
  • 资源模块推荐使用 Asset Modules 做处理,webpack5 也使用 Asset Modules 替换了之前的 file-loader、url-loader、raw-loader 等。
  • html 生成也是内置了 Rust 版本的插件,但是功能可能会稍微弱一些,如果在 html 层面有比较高的定制需求,可以使用 @rspack/plugin-html,这是一个 JS 版本的,性能会比 Rust 版本慢一点,但是扩展更高。

QA

  • ViteRspack 哪个更好?
    这个需要看场景,中小场景 Vite 开发体验与生态是更好的,比如有一些 SSR 的支持,Rspack 目前更适合重型应用(例如公司内部 庞大的B端应用),能编译提速 5-10 倍。
  • 现阶段是否建议迁移 Rspack
    这个需要看是否使用到了一些高级功能或者插件,现阶段可能还不支持,需要查看支持情况,讲人话就是没有对 webpack 进行比较深的定制或骚操作的话,应该问题不大,可以进行尝试。
相关文章
|
7月前
|
Rust JavaScript 前端开发
Rspack 学习了解
Rspack 学习了解
122 0
|
7月前
|
JavaScript
Rspack 创建 vue2/3 项目接入 antdv(rspack.config.js 配置 less 主题)
Rspack 创建 vue2/3 项目接入 antdv(rspack.config.js 配置 less 主题)
119 0
|
7月前
|
消息中间件 RocketMQ
PopAck
PopAck
49 0
|
人工智能 Java 应用服务中间件
SpringBoot实战(十一):MultipartException: Could not parse multipart servlet request
SpringBoot实战(十一):MultipartException: Could not parse multipart servlet request
293 0
|
存储 JSON 安全
msgpack,fmtlib和RPClib库的介绍及使用
msgpack,fmtlib和RPClib库的介绍及使用
|
敏捷开发 存储 数据可视化
aPaaS是什么(aPaaS与iPaaS的区别)
依题:aPaaS是什么?aPaaS与iPaaS二者之间的区别在哪?要想了解区别,首先得搞清概念,不然就是在耍流氓!下面本人就从概念到区别用大白话给你一次性讲清楚。
aPaaS是什么(aPaaS与iPaaS的区别)
|
前端开发
前端项目实战210-Couldn‘t find a package.json file
前端项目实战210-Couldn‘t find a package.json file
102 0
前端项目实战210-Couldn‘t find a package.json file
react+hook+ts项目总结-ts中namespace命名空间
react+hook+ts项目总结-ts中namespace命名空间
124 0
|
JavaScript C语言 iOS开发
函数 table.unpack
函数 table.unpack
520 0
|
消息中间件 JSON NoSQL

热门文章

最新文章