Turbopack似乎并没有那么牛

前言

这几天前端圈子有一个比较火的基建工具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环境下响应较慢

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

http://mpvideo.qpic.cn/0bc3hmaiwaaagmac2kk2wvrvao6drm5qbcya.f10002.mp4?dis_k=b4a823caaaf8c2f5387647818ab3c67b&dis_t=1673263777&play_scene=10400&vid=wxv_2638936246593224705&format_id=10002&support_redirect=0&mmversion=false

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

image-20221027230226728

编译项目

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

yarn run build

image-20221027225518481

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

yarn run start

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

http://mpvideo.qpic.cn/0bc36maiuaaarmaczyc2wrrvb46drlzqbcqa.f10002.mp4?dis_k=604b35a7f8c2999f75b39d3e8ae9d53b&dis_t=1673263777&play_scene=10400&vid=wxv_2638938117907120128&format_id=10002&support_redirect=0&mmversion=false

项目代码

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

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

• next-demo-project

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

写在最后

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

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

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

• 公众号无法外链，如果文中有链接，可点击https://www.kaisir.cn/post/161查看😊