Rust 的风,终究还是吹到了前端

🍄 大家好,我是风筝

🌍 个人博客:【古时的风筝】。

本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正,不胜感激。

每一个赞都是我前进的动力。

公众号:「古时的风筝」

大家好,我是风筝

前些天有一个叫做Rolldown的工具悄悄开源了,做前端开发的同学可能已经了解到了。到文章发布的时候 star 数量已经是 5.8k 了。而此工具的开源作者正是前端大佬,Vue 创始人尤雨溪。

要说这个工具有什么特点吗?那可能有这么几个特点:

  1. 使用 Rust 语言编写;
  2. 性能更好,当然也得益于第1点;
  3. 主要开发者都是前端程序员,而且还有很多贡献者也是前端开发者。当然了,对于大佬们来说,语言只是实现功能的一个工具,用哪个都可以;

Rolldown 是什么

Rolldown 是一个用 Rust 编写的 JavaScript bundler,旨在未来作为 Vite 中的 bundler 使用。

现在写前端几乎都是用框架了,最流程的就是 Vue、React 了。基本上都采用模块化开发了,很少有用原生js、JQuery 来开发的项目了。相比于后端而言,一个大的前端项目一点也不比后端的文件少,甚至更多。

而一个用模块化方式编写的项目,想要在浏览器上运行,还需要做一些额外的工作。其中一个非常重要的工作就是将多个JS或者 TS 文件合并到一个文件中,而这个文件,浏览器能直接支持。这个过程就是 bundler(捆绑器)所要做的工作。

当然,现代浏览器对模块化已经支持的很好了,但是现在的打包服务还是会使用 bundler 打包成一个或几个js文件来用作线上环境。因为这样能最大限度的提高性能,尤其是减少网络方面的开销。

Rolldown 就是用来实现以上所说的功能的。

Rust 出手,要的就是快

现在主流的前端编译工具有 Webpack 和 Vite。Webpack 是比较老牌的了,功能丰富。还有最近比较火的 Vite,Vite 也是 Vue 团队开发的,功能对标 Webpack,只是性能要比 Webpack 高不少。

前端编译工具所说的性能好主要体现在几个方面:

  1. 打包速度快,如果一个项目巨大的话,性能差的打包工具可能要好几分钟;
  2. 开发调试响应快,改完一个文件,马上就能看到效果,而不是等上半天;

除了这两个功能最丰富的工具外,还有功能简单,专门用做 bundler 的 esbuild,用 Go 开发,性能极好。下面是几个常见工具打包一个简易项目的时间。

现在 Vite 中用的 bundler 就是倒数第二的这个 Rollup,所以这次尤雨溪大佬开发 Rolldown 也就是为了将这一部分的性能提上来。看名字也很有意思,一个 up,一个down。

前两天尤雨溪发的博文中说到,Rolldown 比 esbuild 还要快1.4~2倍,而且功能更丰富。果然大佬不用选择,既要性能好又要功能丰富,没有的话,那就自己开发。就是这么任性。

我看到 Hacker News 上,关于 Rolldown 有一个讨论,有一条是这么说的。

这是一个有趣的临界质量案例。几年前,Rust 是一种不太适合启动 JavaScript 工具(或 Python)的语言。然而,一些疯狂的人并不在意,只是继续这样做。随着时间的推移,对工具的基本投资水平突然意味着有很多可以利用的东西,它从一种晦涩的语言选择变成了一种相当合理的语言选择。

Rust 的风吹呀吹

不只是Rolldown,还有很多前端的工具正在被用 Rust 改写。

比如 Tailwind CSS ,在最新的 4.0 版进展公告中,也有写到关于 Rust 的一些应用。

Rust where it counts --- we've migrated some of the most expensive and parallelizable parts of the framework to Rust, while keeping the core of the framework in TypeScript for extensibility.

Rust 发挥了重要作用------我们已将框架中一些最昂贵且可并行的部分迁移到 Rust,同时将框架的核心保留在 TypeScript 中以实现可扩展性。

前些天写过一篇文章 Rust 这么厉害吗,为什么连前端都在卷它,那时候风刚要吹起来。随着Rolldown 的开源,Rust 的影响力必然会影响到更多的前端工具。

还可以看看风筝往期文章

# 一千个微服务之死

# 我患上了空指针后遗症

# Java 把 CPU 干爆了,教你两种方法分分钟定位代码问题

相关推荐
吃面不喝汤661 小时前
Flask + Swagger 完整指南:从安装到配置和注释
后端·python·flask
让开,我要吃人了2 小时前
HarmonyOS开发实战(5.0)实现二楼上划进入首页效果详解
前端·华为·程序员·移动开发·harmonyos·鸿蒙·鸿蒙系统
讓丄帝愛伱2 小时前
spring boot启动报错:so that it conforms to the canonical names requirements
java·spring boot·后端
weixin_586062022 小时前
Spring Boot 入门指南
java·spring boot·后端
Passion不晚2 小时前
Vue vs React vs Angular 的对比和选择
vue.js·react.js·前端框架·angular.js
everyStudy3 小时前
前端五种排序
前端·算法·排序算法
甜兒.4 小时前
鸿蒙小技巧
前端·华为·typescript·harmonyos
Jiaberrr8 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy8 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白8 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http