前端现在的技术发展日新月异,不断有新的技术出现,值得前端开发人员关注.
今天我就介绍下前端中最近出现的一个新的构建工具-TurboPack,这是Next.js团队新推出的面向前端开发的新的构建工具.
TurboPack是什么
TurboPack是基于Rust编写的前端开发构建工具. 是由著名的前端开发框架Next.js团队开发与推出的.
如果你不能理解它是什么,那可以对比当前与TurboPack对应的流行的相关工具是:
- • Webpack
- • Vite
相信现在应该没有前端开发会不知道Webpack或Vite的.所以如果你知道Webpack与Vite是做什么的,你就能理解TurboPack是要做什么的.
非常有意思的是,TurboPack的负责人就是Webpack的作者.
是不是更有兴趣了解了?
On large applications Turbopack updates 10x faster than Vite and 700x faster than Webpack. For the biggest applications the difference grows even more stark with updates up to 20x faster than Vite.
据TurboPack官方自己的介绍,对于大型前端项目,Turbopack比Vite快10x,而比Webpack则快700x,这个提升可能说是非常有价值的.
所以我今天就和大家来详细讲一讲TuroPack,并和大家分析下它为什么能这么快
TurboPack是做什么的
我曾在《前端之变》系列文章中详细的阐述了我对前端技术发展的一些思考.
在这个系列中,我明确定义了前前端阶段与后前端阶段两个不同阶段的前端开发.
在前前端阶段,以JS（JQuery为主) HTML CSS原始的方式进行前端的开发,在这个阶段,前端并未出现创新式的技术或开发方式,仍然以HTML JS CSS直接式的开发为主.比如最著名的JQuery,它仍然一种JS的框架而已
而到了后前端阶段,出现了React,npm包管理,Webpack构建工具等几乎颠覆式的变化,由此为分界,前端开发进入了另一个阶段,我称之为后前端阶段.
而在后前端阶段,Webpack是早期最流行的一个构建工具.虽然有诸如gulp等替代技术,但几乎主流都是使用的Webpack.
Webpack的作用就是构建,在后前端阶段,开发与部署已经脱离.开发使用的语言,框架与代码与最终的部署的代码区别开来.而在以间,你使用JQuery,开发写的代码就是你最终部署的代码,是一致的.
由于开发与部署脱离,所以前端需要一个构建工具,将开发的代码构建为最终的产物. (比如将TypeScript转化为普通的JavaScript,因为浏览器无法识别TypeScript,TypeScript只存在开发阶段,在最终代码中是不可能存在的)
其实前端无论如何发展,最终都离不开HTML JS CSS三个核心技术.不管你使用的是React或是Vue,是Less或是Sass等,最终都要构建为普通的HTML JS CSS
而在这个转化与构建中,Webpack这一类的工具就起到核心作用.
那自然而然今天要说的TurboPack,也是这样一个构建工具.
为什么要另起炉造
原因很简单:Webpack太慢了
早期,Webpack可以说是颠覆性的工具,它在前端的作用与我们后端Java中的Maven或Gradle有点类似.
但Webpack的一个最大问题是,它是基于JavaScript实现的. JavaScript这语言,不管今天它如何流行,它总归是非常慢.
而且Webpack中主要是使用Babel来对JS/TS进行语法转换,Babel也是JS实现,也很慢.
而由于在后前端阶段,开发与最终产物的代码已经脱离,这意味着在开发阶段,不一定要局限在JS语言中,可以使用任何语言或工具,只要最终能构建成普通的JS HTML CSS就行了.
自然而然,无论是Babel或是Webpack,都会有新的语言的框架来取代它们,来实现同样的功能.
对于Babel而言,出现了Esbuild以及Swc两个技术来取代它
而对于Webpack, Vite是这几年流行的大家熟知的取代Webpack的技术
其中,Esbuild与Swc分别是基于GO以及Rust语言,而Vite仍然是JS语言,但它是使用ESbuild来做JS/TS转换.
关于ESBuild以及SWC,可以参阅我的另一篇文章《数十倍性能优势，使用swc来取代babel》,链接附录在文章末
TurboPack有什么不一样
我总结了TurboPack的核心不同之处,这样你就会很容易理解它是怎么做到性能提升这么大的.
- • 使用Rust语言而非JavaScript语言
- • 使用Swc来做TS/JS转换
- • 开发阶段的增量缓存式构建
- • 开发阶段的按需延迟编译
使用Rust语言而非JavaScript语言
与Webpack以及Vite不同,TurboPack抛弃了JS,使用Rust语言来实现一个前端构建工具.
前面我也说过了,JavaScript很慢,非常慢.而Rust则不同,它非常快. 甚至最新的Linux内核,都把Rust做为第一语言来支持,Rust可以C进行比拼.
那自然基于Rust实现的TurboPack,速度当然更快也是理所当然的.
使用Swc来做TS/JS转换
关于为什么JS/TS要转换,这个我在《数十倍性能优势，使用swc来取代babel》文章中详细解释过了,就不再重复解释.
你需要知道的是,在现在的前端开发,JS/TS转换是必不可少的一个步骤,甚至是极为重要的一个步骤.
Babel是在这方面的前锋,它开创性的支持JS/TS转换,当然它是JS实现.
自然,在意识到JS很慢之后,使用更快的语言实现同样目标的框架一定会出现,这只是时间问题.
SWC与ESBuild就是新的取代者.它们一个基于Rust语言,一个基于ESBuild语言来实现.
由于TurboPack是Rust语言的,所以自然选择了同样使用Rust语言的Swc,应该是非常好理解的.
SWC的转换速度是Babel的数十倍以上.
增量缓存式构建
这个主要是针对开发阶段.
过往诸如Webpack这样的构建工具,每次代码修改后,都是全量式构建,也就是重构再完整的构建一次(这个要和热加载区分开来,全量编译不影响热加载).所以在对大型前端项目中,自然这个时间就会久一些.
而TurboPack则开创性的引入构建缓存及增量式构建的创新.针对不同的构建,首先会缓存起来,而后当有文件变更需要触发再次构建时,会分析哪些可以使用缓存来构建,哪些需要重新构建.
当然这样会更快,只是在开发阶段会使用更多的内存.
TurboPack现在只支持内存式缓存,它们也在研究与开发其它缓存实现,甚至是远程缓存. (这样能在不同的机器上增量构建)
使用的内存,自然对内存的占用更多(开发阶段),但对于开发人员来说,计算机内存应该不会有什么问题.
按需延迟编译
为了进一步提升开发阶段的速度,TurboPack则引进了按需延迟编译.
前端现在还有一个延迟加载的概念,比如React Lazy实现等,这个现在在前端已经使用的比较普遍了.我做的前端几乎都会使用延迟加载.
延迟加载的概念是把一个大JS文件拆分成许多非常小的JS,访问时按需加载,从网络上加载一个大JS文件性能远差于按需加载不同的小文件
这里不要搞混淆了,TurboPack引入的是按需延迟编译,与延迟加载是不同的技术.
过往,Webpack都是事先编译好,而TurboPack则改变了这一模式,在你访问某个特定的页面或功能时,分析需要编译哪些文件,再进行编译.
而在编译的过程中,又会使用上面讲的增量缓存式编译.
这样一结合起来,是不是更快了?
需要再次说明,这些都是开发阶段的特性,根本目的都是为了提升开发的效率.
下一代构建利器?
从TurboPack的设计理念与实现上来看,我认为它显然会是更快更优秀的构建工具.而且它的负责人本身就是Webpack的开发者,未来的质量相当有保障,这一点是不用怀疑的.
不过,TurboPack仍然处于alpha开发阶段,当前只持一些主流的前端框架与能力,比如React,JS/TS,CSS等,规划与设计了插件机制,但还没有实现.
由于TurboPack是Next.js这个流行的React开发框架为了提升构建性能而开发出的产物,所以在Next.js 13 (beta)版本中,Next.js已经切换为使用TurboPack实现了.
如果你是一个React使用者,那TurboPack是你现在就可以考虑与使用的工具了.
但是如果你是Vue的使用者,想要使用TurboPack,仍然需要等待,支持Vue的插件还未实现(仅在TurboPack的规划与设想中),但可以从现在开始保持对它的关注.
当然,对于Vue来说,Vite仍然是一个极佳的选择.
但是,对于大型前端项目来说,TurboPack未来会具有非常大的优势.
链接
关于前端,过往我写了挺多文章,这些链接可以供你阅读与参考
- • 数十倍性能优势，使用swc来取代babel
- • 《前端之变》系列起始篇: 前端之变（一）：技术的变与不变
