技术尝鲜：turbopack

什么是turbopack

turbopack 是一个由Rust编写的针对JavaScript和Typescript进行了优化的增量打包器和构建系统。

概念

增量计算

Turbopack 之所以如此之快，是因为它建立在 Rust 的可重用库之上，该库支持称为 Turbo 引擎的增量计算。

turbo引擎把一些函数标记为remembered，当这些函数被调用时，turbo引擎缓存这些函数被调用的内容以及返回的内容。

当某些文件变化时，只需要把变化的文件重新打包并更新缓存即可，没有变化的文件，直接从缓存中读取已经构建过的内容即可。

懒打包

turbopack将执行的每一条脚本称之为任务，它会对每一个任务的结果进行缓存

当进行build任务时，先到缓存中读取被构建的文件的缓存，如果找不到就进行构建，构建完毕把结果写入缓存

缓存入口

当指定入口文件发生变化时重新执行任务

// turbo.json
{
"$schema": "https://turbo.build/schema.json",
  "pipeline":{
    "build":{
      "inputs":["src/*.js"]
    }
  }
}

缓存输出

outputs指定输出文件路径
覆盖默认的缓存输出行为

{
"$schema": "https://turbo.build/schema.json",
  "pipline":{
    "build":{
      "outputs":["dist/"]
    }
  }
}

禁用缓存

当缓存禁用后，每次执行任务不会缓存任务结果，每一次都是重新执行

{
"$schema": "https://turbo.build/schema.json",
  "pipeLine":{
    "dev":{
      "cache":false
    }
  }
}

基于环境变量的缓存变更

turbo允许使用.env文件存储环境变量，在使用,env存储环境变量之前需要安装 dotenv-cli 库

npm install dotenv-cli -D -w

-w 表示安装在根工作空间中，如果不想安装在根工作空间中，使用 --ignore-workspace-root-check

安装完毕之后在turbo.json文件中配置当前命令需要使用的环境变量

{
"$schema": "https://turbo.build/schema.json",
  "pipeline":{
    "test":{
      "env":["VUE_APP_title"]
    }
  }
}

日志

turbopack引擎会缓存控制台的输出日志，当再次执行相同任务时，会从缓存读取输出

hashing

1. 构建一个代码库当前全局状态的hash
2. 添加给定工作区任务的更过因素
3. 一旦turbo在执行中遇到给定工作区的任务，它会检查缓存（本地和远程）是否有匹配的哈希。如果匹配，它会跳过执行该任务，将缓存的输出移动或下载到位，并立即重放之前记录的日志。如果缓存中没有任何东西（本地或远程）与计算的哈希匹配，turbo将在本地执行任务，然后使用哈希作为索引缓存指定的输出
4. 给定任务的哈希值在执行时作为环境变量TURBO_HASH注入。此值可用于标记输出或标记Dockerfile等

在turbo v0.6.10中，turbo在使用npm或pnpm时的散列算法与上述略有不同。当使用这些包管理器中的任何一个时，turbo将在其每个工作区任务的散列算法中包含锁文件的散列内容。它不会像当前的纱线实现那样解析/计算出所有依赖项的解析集

原理

turbopack在 做更少的工作 和 并行工作 这两方面进行优化，turbopack创建一个共享的构建引擎，构建引擎允许函数并行调用，构建引擎缓存函数调用后的结果。

Turbopack根据收到的请求构建应用程序导入和导出的最小图，并且仅打包必要的最小代码。
这种策略使Turbopack在首次启动开发服务器时速度极快。我们只计算渲染页面所需的代码，然后将其以单个块的形式发送到浏览器。

为什么需要turbopack

应用场景

turbopack适用于大型应用

优势

不使用原生ESModule，而是把源代码捆绑到开发服务器，提高开发服务器的启动速度

• 高度优化的机器代码

• 增量计算引擎，允许缓存到单个函数的级别

• 增量计算：最大化速度，最小化完成的工作

• 优化开发服务器的启动时间：构建一个惰性依赖图计算请求的资源