SWC 初体验
前言
如果让我尽快构建一个 React 应用,那么构建工具我会首选 Vite 而不是 CRA,如果要问为什么,那一定就是因为快,用 Vite 构建一个 React 项目要比 CRA 快非常多。
但我今天却发现了一个忽略已久的问题,在Select a variant: ›
选项下有 JS、TS,还有 JS + SWC、TS + SWC,but what is SWC?
什么是 SWC?
我们来看SWC 的 Github Repo,SWC (stands for Speedy Web Compiler
) is a super-fast TypeScript / JavaScript compiler written in Rust.
SWC 是一个用 Rust 语言编写的超快的 TS/JS 编译器,是 Babel 的替代品。SWC 在单线程上比 Babel 快 20 倍,在四核上比 Babel 快 70 倍。
2021 年,kdy1(SWC 的作者)加入 Vercel,Next.js 也更积极的在推广 SWC,从 Next.js 12 开始,预设 compiler 就是使用 SWC 而不是 Babel。
编译器 (Compiler)
这里你可能会疑惑,JavaScript/Typescript 不是解释型语言吗?为什么会需要编译器?
这里我认为有必要解释清楚一些内容,不然就会和我一开始一样混淆一些概念。
首先,像 C、C++、Java 这样的传统后端语言,都是编译型语言。
什么意思?就是说这些语言依靠“编译器”来把你编写的某种语言的源代码转化成机器能读懂的机器码,也就是可执行文件。
根据wikipedia 对编译器的解释,我们可以知道一个现代编译器的工作流程如下:
源代码(source code)→ 预处理器(preprocessor)→ 编译器(compiler)→ 汇编程序(assembler)→ 目标代码(object code)→ 链接器(linker)→ 可执行文件(executables),最后打包好的文件就可以给电脑去判读执行了。
解释型语言 JavaScript
回归正题,要讲清楚为什么 JS/TS 需要编译器,需要清楚先 JS 的工作流程。
解释型语言会将代码一句一句直接执行,利用解释器,在执行期,动态将代码逐句解释为机器代码。
对于前端开发者而言,JavaScript 主要被作为客户端脚本语言在用户的浏览器上运行,此时的 JS 解释器就是用户的浏览器内核(比如说 Google Chrome 的 V8 引擎此时就是 JS 的解释器)。
关于 V8 引擎和 JavaScript 的运行原理之后再开新坑吧,这里的知识点也是非常复杂的(涉及到 JavaScript 的 JIT 即时编译),我这次只讲 SWC 代替的 Babel 这一部分。
JavaScript 中的编译器
JavaScript 的新版本(例如 ES6 及以后的版本)引入了许多新的语言特性,这些特性并不是所有浏览器都能原生支持。编译器(如 Babel)可以将这些现代 JavaScript 代码转换成旧版本的 JavaScript 代码,以确保在老旧浏览器上也能正常运行。
所以这里的 SWC 的工作也是把 ES6 之后的 JavaScript 代码转换成旧版本的代码。