likes
comments
collection
share

今天来聊一聊前端的打包工具,以及未来期望

作者站长头像
站长
· 阅读数 56

前端总是喜欢重复造轮子,很多库都是处于——可以有但没必要的存在,比如各式各样的UI组件库等。这两年的打包工具也是打得十分火热,各种号称速度提升多少多少倍的新打包工具层出不穷。它们对实际的开发中真的有提升吗?应用场景是什么?今天就来缕一缕。

webpack

今天来聊一聊前端的打包工具,以及未来期望

今天来聊一聊前端的打包工具,以及未来期望www.npmjs.com/package/web…

周下载量2千万。

作为打包工具的老大哥,虽然有很多新的打包工具号称要取代webpack,但是至今依旧无人能够撼动webpack的地位。其丰富的生态,也是目前任何打包工具都无法比拟的。

先问一个问题,webpack真的很慢吗?在webpack4.x之前,确实是这样的,因为webpack是用js写的,所以打包速度非常慢。但是webpack5.x之后,打包速度可以说是有质的提升。虽然底层还是js写的,但是webpack加入了cache机制,使得在二次构建的时候,速度非常快。再加上swc-loader的加入,因为swc是用rust写的,速度非常惊人,可以替换掉了传统的js编译器babel-loader,使得打包速度更上一个台阶。

这也是为什么出现了这么多新的打包工具时,webpack依旧能坐稳打包工具老大哥的宝座的原因。

别人在进步的同时,webpack也在进步。

缺点:webpack并不是开箱即用,要学习很多配置,增加了使用成本。

rollup

今天来聊一聊前端的打包工具,以及未来期望

今天来聊一聊前端的打包工具,以及未来期望www.npmjs.com/package/rol…

周下载量1.5千万。

我来暴论一下,如果不是vite带火了rollup,目前用rollup的人应该还是很少的把。rollup配置起来和webpack相差不大,选择rollup也并没有带来更多的好处和便利,所以大家更愿意选择webpack而不是rollup,这也是我暴论的原因。但因其对ES模块支持良好,被vite团队使用,从而鸡犬升天。

在打包工具大战中,你可以看到新工具和webpack对比的,可以看到新工具和esbuild对比的。却几乎很少看到新工具很少和rollup对比的,使得rollup有种上不了台面的感觉。

结论:从其打包能力来说,rollup也只适合中小型项目。

esbuild

今天来聊一聊前端的打包工具,以及未来期望

今天来聊一聊前端的打包工具,以及未来期望www.npmjs.com/package/esb…

周下载量1.9千万。

依稀记得esbuild横空出世,拉开了打包工具大战的序幕,让一个新的工具链vite出现在大家面前。其开箱即用的特性,也让打包变得不再是一件麻烦事。不过目前来说,还是很少人会直接用esbuild来打包项目。就连vite也只是让其来做开发环境下的预打包,而不是打包。虽然也是以esbuild-loader的形式出现在webpack中,但是那样使用的话,功劳又变成webpack了。

后面出现越来越多优秀的打包工具,esbuild似乎又有点不够看了。所以我对esbuild的未来期望是,能够成为vite的备胎活下去(开发环境),但是又很难闯出自己的天地。

不过我永远不会忘了你——esbuild。

turbopack

今天来聊一聊前端的打包工具,以及未来期望

今天来聊一聊前端的打包工具,以及未来期望www.npmjs.com/package/tur…

周下载量160万。

一款号称比webpack速度快700倍的用rust写的打包工具,因为是用rust写的,速度自然不用说了。不过不管速度如何,噱头确实满满。再加上它有一个好爹——vercel,未来发展肯定是前途一片光明,肯定会成为开发react/nextjs的标准打包工具。

但是很可惜,它是react/nextjs独享打包工具,vue开发者们就没这个福气使用了。

rspack

今天来聊一聊前端的打包工具,以及未来期望

今天来聊一聊前端的打包工具,以及未来期望www.npmjs.com/package/@rs…

周下载量7万。

vue开发者们,虽然turbopack没有福气使用,但是rspack却可以一试。

rspack是字节跳动出品,用于解决他们公司巨石应用时打包时速度慢的而开发出来的打包工具,也是用rust写的。其支持react/vue,并且兼容webpack的loader,开箱即用。

虽然rspack打包速度很快,但是比较尴尬的是,vue官方推荐的是用vite开发,并且vite也计划用swc替换babel来加快打包速度。

我们确实缺少一个快的打包工具,rspack站出来了。但是目前rspack还很年轻,上手当玩具还是挺不错的。真投入到生产环境中就不推荐了。先观望一两年再说把,喜欢尝鲜的小伙伴在开发自己的个人项目的时候,可以当玩具去玩玩。

parcel

今天来聊一聊前端的打包工具,以及未来期望

今天来聊一聊前端的打包工具,以及未来期望www.npmjs.com/package/par…

周下载量14万。

一个上古时期的轻量化打包器,不过放在现在也没什么优势了,估计也是慢慢走下坡路。

farm

今天来聊一聊前端的打包工具,以及未来期望

今天来聊一聊前端的打包工具,以及未来期望www.npmjs.com/package/@fa…

周下载量105。

最近新出的,也是一个用rust写的构建工具,和rspack差不多,兼容vite插件。不过在编译js这块,还是用的SWC。

感觉和rspack比起来没什么优势,重复的轮子太多了。小团队开发的个人玩具,选择还是慎重。未来我不太看好,估计作者写个一两年,发现没人用就像snowpack一样弃坑了把。

snowpack

今天来聊一聊前端的打包工具,以及未来期望www.npmjs.com/package/sno…

周下载量1万2。

前两年还火一阵子,但是随着各种各样的打包工具的出现,鱿鱼溪选择了vite,而snowpack本身也没什么优势,非常尴尬,作者就弃坑了。已经两年没更新了。

纠正一下网络上的错误

发现在谈论打包工具的时候,很多人会习惯性的把webpack和vite做对比,实际上工具链是工具链,打包工具是打包工具,两者还是不太能混为一谈的。毕竟vite只是整合了esbuild和rollup,本身没有做打包的事情。就连vite的官网都宣称自己是下一代的工具链,而非打包工具。这玩意就像是我整合了webpack,写了一个脚手架,然后说是写了一个打包工具一样别扭。

今天来聊一聊前端的打包工具,以及未来期望

SWC是和babel平级的,SWC只处理js/jsx等相关的js文件,正如我们只会称babel为js编译器,而非打包工具一样,SWC也只是js编译器而非打包工具。

转载自:https://juejin.cn/post/7337958423780917275
评论
请登录