一、前言
本文基于开源项目：
广东靓仔前阵子对swc、turbopack进行了简单的学习、使用，这里跟小伙伴们分享一下，不少小伙伴们应该没有使用过，下面我们一起来学习学习。
二、swc
swc是什么
swc全称“Speedy Web Compiler”，用Rust编写的超快速TypeScript/JavaScript编译器。可以同时用于Rust和JavaScript的库。swc利用了rust的安全无gc以及系统级语言的特性，保证了性能是接近原生开发，并且可以充分利用多核cpu，同时利用rust做jsbinding，减少了bug的出现。
根据官方测试，swc 对比 babel，swc有至少10倍以上的性能，这是swc与babel最大的区别。
题外话：Rust被应用在前端工具链方面，如压缩（Terser）、编译（Babel）、格式化（Prettier）、打包（webpack）等场景中。
swc安装、使用
安装：
npm i -D @swc/cli @swc/cor
使用：
npx swc ./index.js -o output.js
执行过命令之后会把结果打印在标准输出里，并没有生成文件之类的。
如果想要输出的文件中需要携带参数来完成-o ouput.js或者-d dist编译到dist目录下
swc为什么快
swc是直接将代码根据不同平台来编译成对应的「二进制文件」，省略了js执行过程中（转换为AST以及编译成字节码）最耗时的步骤。
三、Turborepo
Turbopack 中 JavaScript 和 TypeScript 的打包是基于 SWC，使用 Rust 编写，作者愿景是希望替代 Webpack 95% 的功能和扩展性。
不少圈友说，Turbopack跟vite一样，也是ESModule，是另一种形式的vite，这里我们不讨论，只是对打包工具学习为主。
安装、使用
温馨提示：node版本需要16，只在next 13中提供了支持
安装：
npx create-next-app --example with-turbopack --typescrip
使用：
// 启动项目 yarn run dev // 项目打包 yarn run build // 打包后，启动项目 yarn run start
一些概念
增量计算： Turbo 引擎就像函数调用的调度程序一样工作，允许在所有可用内核上并行调用函数。Turbo 引擎还会缓存它调度的所有函数的结果，这意味着它永远不需要执行两次相同的工作。简而言之，它会以最大速度做最少的工作。
惰性打包：Turbopack 在首次启动 Dev server 时速度极快。只需计算渲染页面所需的代码，然后在单个块中将其发送到浏览器。在大规模应用中，这最终比原生 ESM 快得多。
缓存入口、缓存输出
基于环境变量的缓存变更：turbo允许使用.env文件存储环境变量，在使用,env存储环境变量之前需要安装 dotenv-cli 库
Turbopack 的功能
开箱即用的功能：
JavaScript：支持所有ESNext功能、Browserslist和顶层await
TypeScript：开箱即用地支持 TypeScript，包括解析路径和baseUrl
Imports：支持 require、import、动态导入等
Dev Server：优化的 Dev Server 支持热更新 (HMR) 和快速刷新
CSS：支持全局 CSS、CSS Module、postcss-nested 和 @import
静态资源：支持 /public 目录、JSON 导入和通过 ESM 导入资源
环境变量：通过 .env、.env.local 等支持环境变量
三、最后
对swc、Turbopack感兴趣的小伙伴可以持续关注官方动态、以及深入学习。
