Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >初识 Turbopack

初识 Turbopack

作者头像
政采云前端团队
发布于 2023-02-27 08:55:12
发布于 2023-02-27 08:55:12
40700
代码可运行
举报
文章被收录于专栏:采云轩采云轩
运行总次数:0
代码可运行

初识 Turbopack http://zoo.zhengcaiyun.cn/blog/article/turbopack

一 前言

前端构建工具从 Grunt, Gulp 发展到具有划时代意义的 Webpack,Webpack 成为前端不可或缺的开发构建工具。但是随着前端的项目越来越大,无论是项目的启动时间,还是项目的打包时间,变得原来越长,短则四、五分钟,长则十几二十分钟。特别是在发版期间,打包速度直接影响发版效率。Webpack 打包速度成为了前端开发的最大痛点之一。

二 什么是 Turbopack

Turbopack 是 Webpack 的作者 Tobias Koppers 使用 Rust 语言开发一个前端模块化的工具,按作者构想 Turbopack 的目标是取代 Webpack。官方宣称 TurboPack 的速度比 Vite 快 10 倍,比 Webpack 快 700 倍。目前 Turbopack 仍然处于 AIpha 阶段,离正式运用到生产环境还有不少时间。

三 Turbopack 功能和特点

如果用一个字来形容 Turbopack,“懒”字再合适不过,极尽所能做不必要做的事情。

为了更好的说明 Turbopack 特性,我们使用 Webpack 作为对比的对象。

1. 增量计算和函数级别的缓存

我们用一个简单的例子来说明增量计算和缓存,如下代码是一个页面的代码,代码包含了 Header 和 Footer 两个组件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Header from '../components/header'
import Footer from '../components/footer'
export default function Home() {
  return (
    <div>
      <Header />
      <h1>Home</h1> 
      <Footer />
    </div>
  )
}

当页面访问 /home 时 Header 和 Footer 会被标记为需要缓存 ,并被编译输出为 components_header.tsx.js 和 components_footer.tsx.js。而后更新 Footer 这个组件并保存,在 Webpack 中 Header 和 Footer 两个组件都会被重新编译,而仔细观察 Turbopack 输出的缓存文件,会发现只有 Footer 组件被重新编译,而 Header 组件则使用的是上一次的编译结果,如图所示 compoents_footer.tsx.js 的文件被刷新,而 header 则依旧是上一次的结果。

通过这种缓存机制,去除大量重复的工作,使得编译的效率大幅度的提升。

2. 按需编译

本地开发时,Webpack 启动时要全量编译所有文件,这使得启动项目或者切换分支后需要花费大量的时间重新打包编译。而 Turbopack 则采用按需编译的方式,我们使用一个简单的例子来说明什么是按需编译,为什么 Turbopack 的启动速度如此之快,在项目的基础上添加一个 Login 的页面,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Header from '../components/header'
import Footer from '../components/footer'
export default function Login() {
  return (
    <div>
      <Header />
      <h1>Login</h1>
      <Footer />
    </div>
  )
}

启动项目,在不到 1s 时间后控制台提示已经启动成功,但是文件目录下却没有输出任何缓存文件,这是由于 Turbopack 的按需编译机制,所有组件在启动时都未被使用,所以没有任何的编译操作。在浏览器中访问项目的首页地址,此时观察输出缓存文件则发现 /home 页面及其依赖的组件才被编译:

而我们添加的 Login 的页面并没有被编译和输出,我们再次访问 /login 页面,在看一次输出的缓存文件:

在浏览器访问 /login 之后,该页面的以及所依赖的组件才会被编译,而这种按需编译的机制,减少程序的重复工作,提升开发人员的工作效率。此外还有一点,虽然 /home 和 /login 页面都依赖于 Footer 组件,当浏览器访问 /login 时只会更新当前页面的下的 Footer 组件,而 /home 页面下的 Footer 组件是不会被更新的。

3. SWC 编译器

Turbopack 的速度如此之快有一个很大的原因是使用了 SWC 作为编译器。大部分 Webpack 的项目编译都是使用 Babel 编译和转换,由于 Babel 本身也是使用 Javascript 编写,转换效率并不理想,而 Turbopack 原生使用 SWC(https://swc.rs/) 作为编译器。SWC 是一款 Rust 编写的 Javascript 代码编译器,官方宣称其编译速度是 Babel 的 20 倍( Webpack 也可以使用SWC)。

4. 本地持久化

根据作者的想法,未来编译结果不仅仅缓存在内存当中,还会本地持久化。本地持久化的意义是什么?在实际的生产环境中, 中大型的项目往往都需要打包 15 分钟甚至更久,编译结果持久化可以节省大量的打包时间。假设项目里有 50 个页面,本次迭代只修改了其中 10 个页面,Webpack 打包会全量重新打包 50 个页面,而 Turbopack 只需重新打包 10 个被修改的页面,未修改的 40 个页面直接从硬盘读取上一次打包结果,打包效率则得到非常大的提升。

5. Imports

根据作者的计划,Turbopack 支持 CommonJS、ESM, 部分支持 AMD。

CommonJS:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const { add } = require('./math');
add(1, 2);

ESM:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import img from './img.png'; 
import type { User } from '../server/types'; 
import { z } from 'zod';

Dynamic Imports:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const getFeatureFlags = () => {  
  return import('/featureFlags').then(mod => {    
    return mod.featureFlags;  
  })
 }

6. 框架支持

原生支持 JSX/TSX,不需要引入 React 也能使用 JSX/TSX.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
- import React from 'react'; 
const Component = () => {  
 return <div />
}

作者计划在未来通过插件的形式支持 Vue 和 Svelte。

四 Turbopack体验

目前 next.js v13 搭配 Turbopack 已开放体验

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npx create-next-app --example with-turbopack

在启动代码里新增常规启动方式,分别使用两种方式启动项目,做个对比。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  "scripts": {
    "dev": "next dev --turbo",
    "dev_normal": "next dev",
    "dev:tailwind": "concurrently \"next dev --turbo\" \"npm run tailwind -- --watch\"",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "tailwind": "tailwindcss -i styles/globals.css -o styles/dist.css",
    "format": "prettier --write \"**/*.{js,ts,tsx,md}\"",
    "postinstall": "npm run tailwind"
  },

使用 Turbopack 启动时间:

使用常规方式启动项目的时间:

该测试项目仅仅只有 200 个模块,得益于按需编译方式,Turbopack 的启动速度远比常规的方式要快的多。但是以上方法只能看出启动速度,在实际的开发中打包速度更能提升开发体验,因此想测试下 Turbopack 在大量模块下的打包编译速度。

新建一个 Next 的项目:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npx create-next-app@latest

安装 Turbo:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install turbo --save-dev

启动服务:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npx turbo dev

使用以下脚本批量生成模块,将代码 batch.js 文件保存在项目的根目录下,并在 pages 目录下新建 components 文件夹:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const [nodeExeDir, fileDir, count] = process.argv ;
var fs = require('fs');
const getJsx = (index) => {
    return `export function Comp${index}() {
        return <div>hello world ${index}</div>
      }`
}
(async () => {
    let importJsx = [];
    let renderJsx = [];
    for(var i=0;i<count;i++){
        await fs.writeFileSync(`./pages/components/comp${i}.tsx`,getJsx(i),'utf-8');
        importJsx.push(`import { Comp${i} } from './components/comp${i}';`);
        renderJsx.push(`<Comp${i} />  `)
    }
    await fs.writeFileSync(`./pages/page.tsx`,` ${importJsx.join('\r\n')} \r\n export default function Page() {
        return <div> ${renderJsx.join('\r\n')}  </div>
    }`,'utf-8');
})();

执行代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
node batch.js 1000

后面的数字为生成的模块数量,代码生成完成后将 page.tsx 引入并重启服务。分别生成 1000 ~ 10000 个模块的页面,并使用 Turbopack 运行, 记录多次编译所需的平均时间。作为参照使用 Webpack + Babel 的打包速度作为对比,操作方法同上。 得到以下曲线图:

从图表中可以看出,随着模块的增加,打包编译的时间是比较接近线性增长。测试过程中出现了一种情况,当模块数量超过 10000 个后编译时间变得非常不稳定,从 60s ~ 100s 都存在,没有统计意义,所以只统计到 10000 个模块。当数量达到 13000 个,编译过程会出现进程超时的情况。

备注 1:测试的结果会因为 模块的大小、硬件设备、平台的不同,而有比较大的区别;

备注 2:如果使用命令搭建失败,您可以在 https://github.com/vercel/next.js 的 example 文件夹里找到该项目。

五 Turbopack 的生态问题

除了上文所说的打包器之外,还有一款被大家熟知的打包器 Vite。相比 Webpack, Vite 的打包速度也比 Webpack 快非常多,但是流行程度依然没有 Webpack 这么高,比较重要的原因之一就是生态的问题。在 Webpack 的社区有丰富的插件供开发者使用,未来 Turbopack 也会遇到同样的问题。与 Vite 不同的地方,Turbopack 由同一个作者开发,和 Webpack 是继承关系,但作者表示并不会对 Webpack 和 Turbopack 做 1:1 的兼容,意味着 Webpack 的插件是无法在 Turbopack 上使用,同时作者也表示会将在 Webpack 上广泛被使用的插件移植到 Turbopack。因此 Turbopack 想替代 Webpack,未来还有很长的路要走。

六 总结

Turbopack 想替代 Webpack 急需解决的一个是生态问题,以及提供尽可能低成本的迁移方案。当迁移后的收益远大于迁移成本,Turbopack 完全取代 Webpack 也不是没有可能。就目前而言,未来一段时间内 Webpack 依然是主流的前端的工具。

七 参考文档

  • https://turbo.build/pack/docs
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-01-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 政采云技术 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
下一代前端构建利器——Turbopack
详细官方文档:Building Your Application: Routing | Next.js 13.4 (nextjs.org)
用户11100514
2024/04/28
1.3K0
下一代前端构建利器——Turbopack
取代Webpack的打包工具Turbopack究竟有多快
10 月 25 日,Next.js 13 正式发布。同时,Vercel 还推出并开源了下一代打包工具:Turbopack。Turbopack 是针对 JavaScript 和 TypeScript 优化的增量打包工具,由 Webpack 的创建者 Tobias Koppers 和 Next.js 团队使用 Rust 编写。Turbopack 的推出吸引了众多前端开发者的关注,并且Turbopack具有如下一些优势。
xiangzhihong
2022/11/11
4.9K0
取代Webpack的打包工具Turbopack究竟有多快
学不动了,Vercel 推出比 Vite 快 10 倍的打包器 Turbopack
Vercel 是由 Guillermo Rauch 创立的云服务公司,前身为 Zeit,有 Next.js、Node.js 的 websocket 框架 socket.io 和 MongoDB 客户端 mongoose 等知名开源项目为大众所知。Next.js 为了实现后端渲染,重度使用了 JS 生态中的打包构建工具 webpack。
桃翁
2022/12/18
4K0
学不动了,Vercel 推出比 Vite 快 10 倍的打包器 Turbopack
TurboPack,会是下一个前端构建利器吗?
今天我就介绍下前端中最近出现的一个新的构建工具-TurboPack,这是Next.js团队新推出的面向前端开发的新的构建工具.
御剑
2022/11/18
1.5K0
前端打包、编译和优化
目前前端世界主流的前 3 名模块打包器仍然是 Webpack 、 Rollup 和 Esbuild 。
码之有理
2023/03/06
2.3K0
比 Vite 快 10 倍的 Turbopack!?Webpack 的继承者。
Vercel 的使命是提供代码创造者在灵感迸发瞬间所需的速度和可靠性。去年,我们专注于提升 Next.js 打包 App 的速度。
ssh_晨曦时梦见兮
2022/11/07
7350
比 Vite 快 10 倍的 Turbopack!?Webpack 的继承者。
尤雨溪回应:Vite 真的比 Turbopack 慢 10 倍吗?
一周前,Vercel 宣布了 Webpack 的基于 Rust 的继任者 Turbopack。
ssh_晨曦时梦见兮
2022/11/14
1.1K0
尤雨溪回应:Vite 真的比 Turbopack 慢 10 倍吗?
turbopack ,webpack的官方继任者,快700倍
Turbopack 是针对 JavaScript 和 TypeScript 优化的增量打包器,由 Vercel 的 Webpack 和 Next.js 的创建者用 Rust 编写。
爱吃大橘
2022/12/27
1.3K0
turbopack ,webpack的官方继任者,快700倍
前端食堂技术周刊第 57 期:Turbopack、Next.js13、Chrome107、Vite3.2、图解 TLS 1.3
Vercel 发布 Turbopack,目前处于 alpha 阶段。Turbopack 由 Webpack 作者 Tobias Koppers[3] 亲自操刀,用 Rust 编写,作者的愿景是替代 Webpack 95% 的功能和扩展性。
童欧巴
2023/01/08
1.1K0
前端食堂技术周刊第 57 期:Turbopack、Next.js13、Chrome107、Vite3.2、图解 TLS 1.3
在Vite中接入现代化的CSS 工程化方案
对初学者来说,谈到开发前端的样式,首先想到的便是直接写原生 CSS。但时间一长,难免会发现原生 CSS 开发的各种问题。那么,如果我们不用任何 CSS 工程方案,又会出现哪些问题呢?
江拥羡橙
2023/11/12
1.8K0
在Vite中接入现代化的CSS 工程化方案
前端又开撕了:用Rust写的Turbopack,比Vite快10倍?
10 月 26 日,Vercel 公司正式宣布推出新的打包工具 Turbopack。Vercel 声称这是 Webpack 的继任者,用 Rust 编写,在大型应用中,展示出了 10 倍于 Vite、700 倍于 Webpack 的速度。对此,Vite 的维护者提出了质疑。
深度学习与Python
2022/11/28
1.1K0
前端又开撕了:用Rust写的Turbopack,比Vite快10倍?
基于 Rust 编写的 Turbopack 比 Webpack 快 700 倍,竟然比 Vite 还要快!
10 月 26 日,Vercel 公司正式宣布推出新的打包工具 Turbopack。Webpack 创建者 Tobias Koppers 于 2021 年 4 月加入该公司,牵头了该项目。
前端达人
2022/11/25
9090
基于 Rust 编写的 Turbopack 比 Webpack 快 700 倍,竟然比  Vite 还要快!
Webpack 创始人推出比 Webpack“快 700 倍”的 Turbopack,基于 Rust 编写
作者 | Tina 10 月 26 日,Vercel 公司正式宣布推出新的打包工具 Turbopack。Webpack 创建者 Tobias Koppers 于 2021 年 4 月加入该公司,牵头了该项目。 Turbopack 是 Vercel 公司之前一些工作的延续。在此之前,他们用基于 Rust 的 SWC 替换基于 JavaScript 的转译器 Babel,速度提升了 17 倍。他们还替换了 Terser,压缩的速度提高了 6 倍,从而减少了加载时间和带宽的使用。 “Webpack 已被下载超过
深度学习与Python
2023/03/29
5590
Webpack 创始人推出比 Webpack“快 700 倍”的 Turbopack,基于 Rust 编写
尤雨溪回应:Vite 真的比 Turbopack 慢 10 倍?
一周前,Vercel 宣布了 Webpack 的基于 Rust 的继任者 Turbopack。
ConardLi
2023/01/09
1.4K0
尤雨溪回应:Vite 真的比 Turbopack 慢 10 倍?
Vite 4.3正式发布,性能提升,为应对Rust写的Turbopack?
编译 | 丁晓昀,核子可乐 性能改进 在本次小版本迭代中,我们专注于提高开发服务器的性能。解析逻辑得到简化,热路径性能升级,缓存在查找 package.json、TS 配置文件和经过解析的 URL 时也更加智能。 感兴趣的朋友可以参考这篇博文,了解 Vite 贡献者们如何让 Vite 4.3 实现速度飞跃(https://sun0day.github.io/blog/vite/why-vite4_3-is-faster.html)。 与 Vite 4.2 相比,这个冲刺版本实现了全面的速度跃迁。 下面
深度学习与Python
2023/04/30
6060
Vite 4.3正式发布,性能提升,为应对Rust写的Turbopack?
一个比Webpack快700倍比 Vite 还快 10 倍打包工具
作为一名前端切图崽,相信大家都对打包工具不陌生,大众熟识的Webpack,Gulp,Rollup,Vite,还有这几天闹得沸沸扬扬的 Turbopack
程序员老鱼
2022/12/02
1K0
渐进式 Unbundled 开发工具探索之路
业界主流的开发工具还是以 Webpack 为主,随着项目体积增大,开发阶段一次性将源代码和第三方依赖编译处理打包到一起的耗时会显著增加。在我们团队内部的 monorepo 仓库中,应用项目开发时,为了开发阶段调试方便,通常也会对一些公共库源码一起打包编译,成千上万个模块导致首次 dev server 启动耗时在几分钟甚至十几分钟,严重影响了开发效率与体验。
winty
2021/07/01
1.5K0
渐进式 Unbundled 开发工具探索之路
Turbopack似乎并没有那么牛
这几天前端圈子有一个比较火的基建工具Turbopack,官方文档号称比vite快10倍,比webpack快700倍。今天正好有空,把官方提供的demo浅玩了一下,发现它并没有那么神。
神奇的程序员
2023/01/09
8250
Turbopack似乎并没有那么牛
前端构建效率优化之路
我们的系统(一个 ToB 的 Web 单页应用)前端单页应用经过多年的迭代,目前已经累积有大几十万行的业务代码,30+ 路由模块,整体的代码量和复杂度还是比较高的。
Sb_Coco
2022/09/19
1.3K0
前端构建效率优化之路
Vite2+React+TypeScript:搭建企业级轻量框架实践
Hello大家好,前段时间写了个Vue3的工程项目用起来还不错,其实老早前就想把它移植过来React这边,奈何工作比较忙一直拖到现在,才陆陆续续把杂七杂八的模块补充好。
南山种子外卖跑手
2022/03/31
2K0
Vite2+React+TypeScript:搭建企业级轻量框架实践
推荐阅读
相关推荐
下一代前端构建利器——Turbopack
更多 >
加入讨论
的问答专区 >
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
    本文部分代码块支持一键运行,欢迎体验
    本文部分代码块支持一键运行,欢迎体验