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 进行比较深的定制或骚操作的话,应该问题不大,可以进行尝试。
相关文章
|
Rust 开发工具 git
日志高亮 | notepad
日志高亮 | notepad
541 7
|
存储 缓存 前端开发
npm私服搭建—verdaccio方案及其最佳实践
如今前端圈已十分繁荣,一个跟得上技术时代脚步的互联网公司必定是前后端分离的(至少在狭义上是分离的),这就导致了前端承受的分工压力会越来越大,很多公司的前端项目变得十分庞杂,因此技术负责人可能会考虑根据业务线进行拆分为几个工程系统,这样又引申出一个问题:这几个系统之间如何共用一套公司内部的组件库呢?
2705 0
|
存储 负载均衡 NoSQL
一文让你搞懂 zookeeper
一文让你搞懂 zookeeper
19250 16
|
9月前
|
人工智能 自动驾驶 算法
人工智能引发的新文明冲击:未来十年消失的职业!
在21世纪科技浪潮中,人工智能(AI)正以前所未有的速度改变生活方式和工作模式。未来十年内,预计30种传统职业如流水线工人、仓库拣货员、收银员等将逐渐消失,带来前所未有的挑战与机遇。本文探讨这一趋势,分析受影响的职业,并讨论人类如何在AI时代找到新定位。通过GAI认证提升技能,把握AI时代的机遇,共创辉煌未来。
|
前端开发 UED
React Suspense 大揭秘!异步加载与优雅降级的神奇黑科技,让你的 React 应用更出色!
【8月更文挑战第31天】React Suspense 是 React 提供的一种处理异步数据加载和优雅降级的特性。它通过 `React.lazy` 和 `Suspense` 组件实现异步加载,在加载过程中显示提示信息,并通过错误边界组件 `Error Boundary` 捕获错误,避免应用崩溃,从而提升用户体验。
398 0
|
运维 测试技术 Linux
关于Stress 压力测试工具的介绍与使用
在日益复杂的计算环境中,保证系统的稳定性和性能成为了每个Linux管理员的核心任务。面对不断增长的数据量和业务需求,如何有效评估系统极限和潜在瓶颈? 压力测试工具:stress,成为了不可或缺的助手。这篇记录描述stress工具的使用方法及其在模拟真实负载中的实用性。
关于Stress 压力测试工具的介绍与使用
|
存储 数据库 虚拟化
无缝过渡:企业级服务器迁移的策略与最佳实践
【10月更文挑战第4天】随着企业数字化转型的加速,服务器迁移成为企业IT基础设施升级的重要环节。本文从架构与规划的视角,探讨了企业级服务器迁移的策略与最佳实践,旨在帮助企业实现无缝过渡,降低迁移风险,提高迁移效率。
966 4
|
算法 安全 物联网
如何应用SM2算法进行身份认证
【10月更文挑战第5天】如何应用SM2算法进行身份认证
823 1
|
供应链 算法 数据挖掘
一文看懂:销售数据分析怎么做?
今天跟大家分享数据分析里最高频的一个工作:销售分析。不管是实打实挣钱的公司,还是指望上市圈钱的公司,销售业绩都是领导们最看重的指标。 很多人从事数据分析工作,也是从基础的“销售统计专员”做起的。今天就简单分享下,销售分析该如何做。
1140 0
一文看懂:销售数据分析怎么做?
|
机器人 测试技术 持续交付
Python进行自动化测试测试框架的选择与应用
【6月更文挑战第9天】本文介绍了Python自动化测试的重要性及选择测试框架的考量因素,如功能丰富性、易用性、灵活性和集成性。文中列举了常用的Python测试框架,包括unittest、pytest、nose2和Robot Framework,并提供了使用pytest进行单元测试的示例代码。此外,还展示了如何使用Robot Framework进行验收测试和Web UI测试。选择合适的测试框架对提升测试效率和软件质量至关重要,团队应根据项目需求、社区支持、集成性和学习曲线等因素进行选择。通过不断学习和实践,可以优化自动化测试流程,确保软件的稳定性和可靠性。

热门文章

最新文章