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


写在最后


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


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


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


  • 公众号无法外链,如果文中有链接,可点击下方阅读原文查看😊
相关文章
|
JavaScript
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
1667 0
|
Linux Docker 容器
.net Core WebApi发布到Docker并推送到阿里云容器服务
.net Core WebApi发布到Docker并推送到阿里云容器服务
1012 0
.net Core WebApi发布到Docker并推送到阿里云容器服务
|
6月前
|
域名解析 网络协议 网络安全
SSL证书验证全攻略:DNS/HTTP/手动解析怎么选?
SSL证书在网络安全中至关重要,1Panel提供三种验证方式:DNS验证、HTTP验证和手动解析。DNS验证便捷,适合CDN网站;HTTP验证快速,需服务器在线;手动解析灵活,但操作复杂。根据需求选择合适确认方式,定期检查证书状态。
769 2
|
11月前
|
缓存 Java Maven
【简单四步教你解决♥十分有效】Maven依赖报错、依赖或插件导入失败的万能解决办法
【简单四步教你解决♥十分有效】Maven依赖报错、依赖或插件导入失败的万能解决办法!在处理Maven项目问题时,首先检查Maven配置是否正确。接着通过“File--Invalidata Caches”清除IDEA缓存并重启。使用Maven命令`mvn dependency:purge-local-repository`和`mvn dependency:resolve`清除本地依赖缓存。最后,在Terminal中输入`mvn clean install`完成构建。
3281 1
【简单四步教你解决♥十分有效】Maven依赖报错、依赖或插件导入失败的万能解决办法
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
1210 1
vscode编辑器中如何调试nextjs代码
|
JavaScript
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
1144 3
|
8月前
|
人工智能 运维 数据处理
单机部署DeepSeek满血版(BF16精度)和Qwen,阿里云百炼专属版AI训推一体机重磅发布!
单机部署DeepSeek满血版(BF16精度)和Qwen,阿里云百炼专属版AI训推一体机重磅发布!
|
11月前
|
机器学习/深度学习 Rust 算法
Python环境管理的新选择:UV和Pixi,高性能Python环境管理方案
近期Python生态系统在包管理领域发生了重要变化,Anaconda调整商业许可证政策,促使社区寻找更开放的解决方案。本文介绍两款新一代Python包管理工具:UV和Pixi。UV用Rust编写,提供高性能依赖解析和项目级环境管理;Pixi基于Conda生态系统,支持conda-forge和PyPI包管理。两者分别适用于高性能需求和深度学习项目,为开发者提供了更多选择。
2393 2
|
缓存 开发工具 git
Git创建分支以及合并分支
在Git中,创建分支使用`git branch [branch_name]`,切换分支使用`git checkout [branch_name]`。修改文件后,通过`git add [file]`添加到暂存区,然后`git commit`提交到本地仓库。如果是新建分支的第一次推送,使用`git push origin [branch_name]`推送到远程仓库,之后可以简化为`git push`。合并分支时,使用`git merge [branch_name]`将指定分支的更改合并到当前分支。
486 2
Git创建分支以及合并分支
|
消息中间件 监控 Linux
RabbitMQ轻松入门:从零开始的部署与安装指南
RabbitMQ轻松入门:从零开始的部署与安装指南
348 0
RabbitMQ轻松入门:从零开始的部署与安装指南