前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >数十倍性能优势,使用swc来取代babel

数十倍性能优势,使用swc来取代babel

作者头像
御剑
发布2022-04-15 08:33:39
2.3K0
发布2022-04-15 08:33:39
举报
文章被收录于专栏:微言码道

最近我抽空把myddd-web与myddd-electron从babel迁移至了swc,其效率提升非常多,我觉得这是个非常好的工具,就向大家介绍下。

做前端的朋友应该都非常清楚babel是做什么的吧。

JS的版本困境

JavaScript这门语言受限于历史因素,有许多问题,其中一个就是新的语言特性始终无法在浏览器中得到全面支持与应用。

如果你要写一个支持绝大多数浏览器的网页,最好的选择可能就是ES5了,但你要知道ES5之后,JavaScript也一直在不停的更新,其中最重要的一个版本是ES 6,而到今年2022年,已经是ES 2022(ES13)了

和其它语言不同,JavaScript是要在浏览器中运行,这就决定了你在使用JS时不得不考虑浏览器的支持情况。

而浏览器一方面对新特性的支持需要时间,再一个你还得考虑旧版本浏览器还是有很多人在用,这就造成一个困境:

你可能不敢使用最新版本的JS语言特性

但所幸,babel横空出世,它就是一个作用:转换,将你写的JS转换成大多数浏览器都支持的语法样式。

这样,你就能够在使用JS最新的特性的同时,而又不用担心浏览器的兼容性问题了。

确实很棒的东西,甚至你可以说它挽救了JavaScript,但它有一个问题:

它不够快

原因很简单:

Babel是JavaScript写的,JavaScript就是有点慢

swc 与 esbuild

如果是这样,我们都很容易会去思考一个问题,如果JavaScript能写一个转换器,为什么不用一些更高性能的语言来写一个类似的转换器呢?

好想法,这也是为什么会有swc与esbuild出现的原因。

babel是开创性的,它的价值永远值得纪念,但这不表示我们不能有新的东西取代它,技术就是如此,新的取代旧的,这是永恒不变的趋势。

在意识到了babel的缺点后,一些优秀的程序员开始使用不同的语言来实现一个"更快的babel"。

而在这其中,以swc和esbuild脱颖而出。

swc

swc是2019由Kang Dong Yoon发布的,它后面的支持者是Vercel(next.js的创建者),搞React应该知道next.js吧,非常有名的一个框架。

而最近的一个next.js 12版本,它们也迁移至了swc,据其官网反馈:

"Compilation using the Next.js Compiler is 17x faster than Babel and enabled by default since Next.js version 12."

它们说有17倍的速度提升,确实太惊人了。

swc是基于Rust语言

esbuild

esbuild是由 Evan Wallace在2020写的, Evan Wallace是Figma的创始人。

esbuild是由go语言写的。

可能前端人员对go不是非常熟悉,在后端领域,go现在非常火爆,它以杰出的性能而闻名。

而最近比较流行的Vite工具,它就是使用的esbuild,所以它非常快。

速度提升

网上对这三者做性能测试的文章和数据挺多的,总体来说,esbuild最快,swc和esbuild差不多,babel最慢。

swc官网自己的描述是:

"SWC is 20x faster than Babel on a single thread and 70x faster on four cores."

esbuild和swc确实都快很多,这是事实。

我把我2020年基于electron做的一个跨平台桌面软件,使用了swc,编译速度提升非常明显,以前需要10多秒编译完成,而swc下只需要1-2秒瞬间完成。

这种性能提升的感受非常明显。

为什么是swc

为什么使用swc替换,而不是esbuild?

其实我也是受next.js影响,我最开始是在next.js官网上看到它提及swc这个,而next.js是一个React框架,而我的myddd-web也好,myddd-electron也好,都是基于React的,所以就跟着也使用swc了。

而swc也提供了对webpack及jest的良好支持,所以使用webpack + swc搭配是没有任何问题的。

考虑到swc和esbuild的性能相差不大,未来myddd可能还是会持续使用swc而不是esbuild。

不过我也不能确定,技术永远都是会不断更新的对吧。

迁移至swc

迁移至swc这个工作,我最近已经抽空完成了。

从现在开始,你访问https://starter.myddd.org上,生成myddd-web或myddd-electron的项目,默认就是使用的swc。

而我认为,如果你也是在做前端,无论如何,你都可以关注下swc或者esbuild,它们带来的速度提升是非常明显的。

也许我们是时候向babel说再见了。

最后,说个关于babel的有趣的事:

babel是Sebastian McKenzie在2014年时,他还在高中时期开始写的一款工具,而Sebastian McKenzie同时是前端另一款非常流行的工具yarn的创始人。

这让我不得不想到Linux内核的作者 Linus Torvalds,经历如此相似。

向这些天才致敬,这使得我相信技术需要的是热情与创意。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-03-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 微言码道 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • JS的版本困境
  • swc 与 esbuild
  • 速度提升
  • 为什么是swc
  • 迁移至swc
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档