Turbopack似乎并没有那么牛

简介: Turbopack似乎并没有那么牛

前言


这几天前端圈子有一个比较火的基建工具Turbopack,官方文档号称比vite快10倍,比webpack快700倍。今天正好有空,把官方提供的demo浅玩了一下,发现它并没有那么神。

640.png


                            image-20221027223245550


环境搭建


Turbopack目前还处于alpha阶段,暂时只在next 13中提供了支持,按照官方文档所述,我们只需执行如下命令即可完成项目的初始化。


npx create-next-app --example with-turbopack --typescript


640.png

                            image-20221027223756134


启动项目


一切准备就绪后,我们打开项目,执行package.json中的dev指令,即可启动项目。


yarn run dev


本以为会很顺利,但是它报错了。


error - [rendering] [root of the dev server]/  Error during SSR Rendering
  timed out waiting for the Node.js process to connect


640.png

                          image-20221027224023436


在next仓库的issue区域找到了这个问题的解决方案,原来是我的node版本不对,他要求node版本必须是16,我本地的版本是14。


640.png

                           image-20221027224321930


当我把node版本改为16.14.2之后,项目终于成功启动了。


640.png

                            image-20221027224607692

 640.png

                                   image-20221027224625952


dev环境下响应较慢


项目启动的速度是挺快的,只需要几十毫秒,首屏加载也很快,但是当我在页面上切换菜单时,发现它卡卡的,如下述视频所示。


image.png


看了下控制台打印的日志,发现响应时间确实有点长。


640.png

                               image-20221027230226728


编译项目


执行package.json中的build指令,即可将项目打包。


yarn run build


640.png

                           image-20221027225518481


打包成功后,执行start指令,即可启动项目。


yarn run start


项目启动后,我们再来试下菜单栏切换时的响应速度,发现它很丝滑,感受不到一丁点卡顿,如下述视频所示:


image.png

5

项目代码


整体使用下来,感觉它在dev环境下运行时,即时编译的速度并没有惊艳到我,路由切换时还是卡卡的,很影响开发体验,我还是继续用webpack吧。希望正式版本发布时,这个响应速度可以更快吧。


本文所创建的项目已上传至GitHub,需要的开发者可自取:


  • next-demo-project


注意:项目中我用了Volta作为包管理工具,对此感兴趣的开发者可移步我的另一篇文章:强大的JavaScript工具管理器Volta


写在最后


至此,文章就分享完毕了。


我是神奇的程序员,一位前端开发工程师。


如果你对我感兴趣,请移步我的个人网站,进一步了解。


  • 公众号无法外链,如果文中有链接,可点击下方阅读原文查看😊
相关文章
|
3月前
|
缓存 Rust
第9期 新一代快速打包工具 Turbopack
第9期 新一代快速打包工具 Turbopack
69 0
|
3月前
|
缓存 Rust 前端开发
比Webpack快700倍的Turbopack,到底快在哪?
比Webpack快700倍的Turbopack,到底快在哪?
|
1月前
|
数据采集 API C#
网页解析高手:C#和HtmlAgilityPack教你下载视频
使用C#和HtmlAgilityPack解析小红书网页,下载其视频内容。文章涵盖了解析网页、获取视频链接、C#实现、HtmlAgilityPack简化解析、代理IP确保下载稳定及多线程提高下载效率。提供的代码示例展示了如何设置代理和多线程下载视频。实验结果显示,该方法能有效、高效地下载小红书视频。
网页解析高手:C#和HtmlAgilityPack教你下载视频
|
3月前
|
Rust 前端开发 JavaScript
尤雨溪:Turbopack 真的比 Vite 快 10 倍吗?
尤雨溪:Turbopack 真的比 Vite 快 10 倍吗?
|
4月前
|
前端开发 JavaScript API
webpack插件开发必会Tapable
webpack插件开发必会Tapable
53 0
|
6月前
|
前端开发 rax 安全
CISCN WP ——R3vCr4ck
CISCN WP ——R3vCr4ck
30 0
|
8月前
|
JavaScript 前端开发 Python
appium--使用PyYAML封装Capability
appium--使用PyYAML封装Capability
|
11月前
|
缓存 Rust 前端开发
比 Vite 快 10 倍的构建工具:Turbopack!
Vercel 的使命是提供代码创造者在灵感迸发瞬间所需的速度和可靠性。去年,我们专注于提升 Next.js 打包 App 的速度。
|
存储 缓存 JSON
swc与Turbopack
本文适合对新主流技术感兴趣的小伙伴阅读
|
资源调度 JavaScript 前端开发
snowpack 快速开始
snowpack 快速开始
99 0
snowpack 快速开始