侧边栏壁纸
博主头像
神奇的程序员

今天的努力只为未来

  • 累计撰写 169 篇文章
  • 累计创建 26 个标签
  • 累计收到 221 条评论

目 录CONTENT

文章目录

Turbopack似乎并没有那么牛

神奇的程序员
2022-10-27 / 0 评论 / 7 点赞 / 1,025 阅读 / 1,079 字 正在检测是否收录...

前言

这几天前端圈子有一个比较火的基建工具Turbopack,官方文档号称比vite快10倍,比webpack快700倍。今天正好有空,把官方提供的demo浅玩了一下,发现他并没有那么神。本文就跟大家分享下我所遇到的问题,欢迎各位感兴趣的开发者阅读本文。

image-20221027223245550

环境搭建

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

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

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

image-20221027224023436

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

image-20221027224321930

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

image-20221027224607692

image-20221027224625952

dev环境下响应较慢

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

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

image-20221027230226728

编译项目

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

yarn run build

image-20221027225518481

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

yarn run start

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

项目代码

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

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

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

写在最后

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

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

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

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
  • 本文首发于神奇的程序员公众号,未经许可禁止转载💌
7

评论区