203 - 《Turbopack》

上午翻了遍文档，整理了下笔记，方便没时间看的同学快速过一遍 Turbopack 是啥、为啥做、特点和规划。

Turbopack 有啥特性？

1、天生增量，构建过的绝不重新构建
2、生态友好，支持 TypeScript、JSX、CSS、CSS Modules、WebAssembly 等
3、热更极快，比 Vite 快 10 倍
4、原生支持 RSC（React Server Components）
5、支持多环境，比如 Browser、Server、Edge、SSR、RSC
6、支持 NextJS

Turbopack 为啥快？

1、基于 Rust 二进制语言
2、内置增量计算引擎。该引擎结合 Turborepo 以及 Google 的 Bazel 的增量计算的创新，可以将缓存提高到单个函数的水平
3、缓存。但现在只支持内存缓存，未来会支持持久化缓存，存文件系统或远程服务器
4、基于请求的按需编译。

Turbopack 尝鲜？

$ npx create-next-app --example with-turbopack
$ pnpm i
$ pnpm run dev

为啥要写 Turbopack？

1、Vite 这种 Bundless 的方式，由于只要编译一个文件，所以响应式更新速度极快。但在处理模块较多的大型应用时，大量级联的网络请求会导致相对缓慢的启动时间。对于浏览器来说，更多请求也意味着更慢的速度。
2、Turbopack 内置了可重复使用的 Turbo 构建引擎，这类似一个函数调用的调度器，允许并行执行，更重要的是，他会缓存所有调度的函数的结果，这意味着同样的工作永远不需要做两次。
3、为啥不用 esbuild？因为 esbuild 虽然快，但是，1）不支持 HMR，2）没有缓存，这意味着你需要重复做同样的工作，3）不支持懒打包，比如基于路由和请求的按需打包方案。
4、Turbopack 支持在 dev 模式下做懒打包，当一个请求过来，会建立懒模块依赖图，只计算用到的模块，然后打包出单一的块返回给浏览器。作者认为，在