vite构建项目中的swc是什么

光影少年

于 2024-10-09 21:37:05 发布

阅读量563

点赞数 4

文章标签： swc react.js vue.js

本文链接：https://blog.csdn.net/qq_25416827/article/details/142797075

版权

在 Vite 项目中，swc 是一种高性能的编译器，用于替代传统的 JavaScript 编译工具，如 Babel。它以速度和效率著称，可以加速编译和转换 JavaScript 和 TypeScript 代码，从而大幅提升开发和构建的效率。

1. 什么是 `swc`？

swc（Speedy Web Compiler）是一个用 Rust 编写的编译器，它能够非常快速地编译、转换和优化 JavaScript 和 TypeScript 代码。swc 的目标是提供与 Babel 类似的功能，但其速度要比 Babel 快得多（根据官方数据，通常是 Babel 的 20 倍甚至更多）。

`swc` 的特点：

高性能：因为 swc 是用 Rust 语言编写的，并且是针对并行化和性能优化而设计的，因此它在速度上有极大的优势。
功能全面：支持大多数现代 JavaScript 和 TypeScript 语法特性，如 JSX、TypeScript、装饰器、模块解析等。
替代 Babel：swc 提供了类似于 Babel 的配置方式（比如 swc.config.json），因此可以在很多场景下替代 Babel 用作 JavaScript 和 TypeScript 的转换工具。
树摇优化：支持对代码的 tree-shaking 优化，能够消除无用的代码，减少打包体积。

2. 在 Vite 中使用 `swc`

为什么 Vite 项目要引入 `swc`？

Vite 的核心是以高效和快速的开发体验为目标设计的。在开发模式下，Vite 采用的是原生的 ES 模块（ESM）解析来实现快速的模块加载；在生产模式下，它则使用 Rollup 进行打包构建。

为了在开发和生产模式下提供更好的编译体验，Vite 允许开发者选择不同的编译工具来进行 JavaScript 和 TypeScript 的处理。在这个过程中，swc 就成为了一个非常理想的选择：

更快的开发速度：swc 的编译速度极快，在大项目中能够显著缩短编译和热更新的时间。
生产模式优化：在生产模式下，swc 也能快速地进行代码优化，减少打包体积和构建时间。

如何在 Vite 中使用 `swc`？

在 Vite 中使用 swc，通常有两种方式：

通过 Vite 的插件进行集成
- Vite 本身有一个官方插件 vite-plugin-swc，可以非常方便地使用 swc 替代原来的 TypeScript 编译器（tsc）或 Babel。

# 安装插件npm install -D vite-plugin-swc

然后在 vite.config.ts 中进行配置：

import { defineConfig } from 'vite';import swc from 'vite-plugin-swc';export default defineConfig({  plugins: [swc()],  build: {    target: 'es2020'  }});

通过 esbuild 的配置中引入 swc

Vite 默认使用 esbuild 来处理大部分的 TypeScript 转换，但你可以通过配置 vite.config.ts 来使用 swc 替代 esbuild 的编译行为。

你可以在 vite.config.ts 中指定 swc 作为处理器：

import { defineConfig } from 'vite';import { swcPlugin } from '@vitejs/plugin-swc';export default defineConfig({  plugins: [swcPlugin()],});

在项目中使用 `swc` 的效果：

使用 swc 可以在以下几个方面看到明显的效果提升：

开发体验提升
- 由于 swc 的编译速度比 Babel 和 TypeScript 编译器快得多，所以可以显著减少开发环境中的编译等待时间，提升开发体验。
构建速度加快
- 使用 swc 进行生产环境的构建时，能够快速地处理 TypeScript 和 JSX 语法，生成更高效、更小的产物，从而减少构建时间。
代码体积优化
- swc 内置了一些优化策略，比如更高效的 tree-shaking，可以移除无用代码，从而减少最终的打包体积。

3. `swc` 的原理

3.1 编译过程

swc 的编译过程大体上可以分为三个步骤：

解析（Parsing）
- 将 JavaScript/TypeScript 代码解析成抽象语法树（AST）。
转换（Transformation）
- 对 AST 进行操作，比如将 JSX 转换为等效的 JavaScript 表达式，或者将 TypeScript 的类型移除。
- 这个阶段是 swc 的核心之一，也是很多优化策略（如 tree-shaking）得以实现的地方。
生成（Code Generation）
- 将优化后的 AST 重新生成 JavaScript 代码，并输出为最终的产物。

3.2 `swc` 的优化策略

AST 优化：swc 采用了高效的 AST 操作和遍历算法，在不牺牲编译速度的前提下进行语法转换和优化。
并行编译：swc 的编译操作是并行进行的，它利用了 Rust 的多线程特性，可以在多核 CPU 上更快地处理大项目的编译任务。
增量编译：swc 支持对文件的增量编译，因此在开发模式中，只会重新编译那些变更过的文件，从而提高热更新的速度。

4. `swc` 和其他编译器的对比

与 Babel 的对比
- swc 的目标是替代 Babel，所以它提供了与 Babel 类似的插件系统和配置方式。
- 在编译速度上，swc 比 Babel 快很多。
与 esbuild 的对比
- esbuild 和 swc 都是性能非常强大的编译器，但 swc 提供了更丰富的 TypeScript 支持和更高级的语法转换功能（比如装饰器）。
- esbuild 通常更注重简单和快速的转换，而 swc 侧重于全面的功能支持。