❌

普通视图

发现新文章，点击刷新页面。
昨天以前首页

Oxc 最新 Transformer Alpha 功能速览！ 🚀🚀🚀

✇掘金 前端
作者 萌萌哒草头将军
2025年8月17日 20:16

前言

刚刚看到尤雨溪推特转发了 OXC 团队的最新成果，并介绍了该成果背后的一些故事！

尤雨溪推特

今天介绍下这些详细成果！

往期精彩推荐

正文

Oxc Transformer Alpha 内置 React Refresh，以及无需 TypeScript 编译器的独立 .d.ts 文件生成。相较于 SWC 和 Babel，Oxc 在性能、内存占用和包体积上表现出色，堪称前端构建的实用利器。

以下是其核心特性的详细解析。

1. TypeScript 和 JSX 到 ESNext 转换

Oxc 支持将 TypeScript 和 React JSX 代码转换为 ESNext，性能显著优于传统工具：

  • 3-5 倍于 SWC：处理 100 到 10,000 行代码，Oxc 耗时仅 0.14ms 至 14.9ms，而 SWC 为 0.7ms 至 35.9ms。
  • 20-50 倍于 Babel：Babel 处理同样代码耗时 11.5ms 至 492ms，Oxc 效率遥遥领先。

2. 内置 React Refresh

Oxc 集成了 React Refresh，支持开发中的热重载，速度比 SWC 快 5 倍，比 Babel 快 50 倍。这让 React 开发更流畅，减少等待时间。

3. TypeScript 独立声明生成

Oxc 提供无需 TypeScript 编译器的 .d.ts 文件生成，性能惊人：

  • 40 倍于 TSC：处理 100 行代码仅需 0.1ms（TSC 为 23.1ms）。
  • 20 倍于大文件：10,000 行代码耗时 3.5ms（TSC 为 115.2ms）。

示例：

import { transform } from 'oxc-transform';
const transformed = transform('file.ts', sourceCode, {
  typescript: {
    onlyRemoveTypeImports: true,
    declaration: { stripInternal: true },
  },
});
await fs.writeFile('out.js', transformed.code);
await fs.writeFile('out.d.ts', transformed.declaration);

4. 轻量级与低内存占用

Oxc 仅需 2 个 npm 包（总计 2MB），对比 SWC 的 37.5MB 和 Babel 的 21MB（170 个包）。内存占用上，Oxc 处理 10,777 行代码仅用 51MB 内存，SWC 用 67MB，Babel 高达 172MB。

5. 实际应用案例

  • Vue.js：实验性使用 oxc-transform 优化构建流程。
  • vue-macros：通过 unplugin-isolated-decl，.d.ts 生成时间从 76s 降至 16s。
  • Airtable：在 Bazel 构建中集成 Oxc 的 .d.ts 生成。
  • Rolldown：直接使用 Rust oxc_transformer crate。

最后

Oxc Transformer Alpha 以 Rust 的高性能和轻量级设计，为 JavaScript 编译带来新可能。无论是加速 TypeScript 转换还是优化 React 开发体验，它都展现了朴实无华的实用力量！

今天的分享就这些了，感谢大家的阅读！如果文章中存在错误的地方欢迎指正！

往期精彩推荐

❌
❌