❌

普通视图

发现新文章，点击刷新页面。
昨天 — 2025年8月17日首页

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 开发体验，它都展现了朴实无华的实用力量！

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

往期精彩推荐

Node.js v24.6.0 新功能速览 🚀🚀🚀

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

前言

Node.js v24.6.0 发布了，让我们一起来看看这些朴实却强大的变化！

往期精彩推荐

正文

以下是 v24.6.0 的核心更新和功能的详细介绍。

1. CLI：系统 CA 支持

Node.js v24.6.0 新增 NODE_USE_SYSTEM_CA=1 环境变量，支持使用系统 CA 证书。这简化了企业环境下的证书配置，提升兼容性。

示例：

NODE_USE_SYSTEM_CA=1 node app.js

这对需要严格安全合规的场景尤其实用。

2. Crypto：支持 ML-DSA 算法

Crypto 模块新增了对 ML-DSA（Module Lattice-based Digital Signature Algorithm）的支持，包括 KeyObject 生成、签名和验证。这是后量子密码学算法，为未来安全奠定基础。

示例：

const crypto = require('crypto');

// 生成 ML-DSA 密钥对
const { publicKey, privateKey } = crypto.generateKeyPairSync('ml-dsa');

// 签名
const signature = crypto.sign(null, Buffer.from('data'), privateKey);

// 验证
const isValid = crypto.verify(null, Buffer.from('data'), publicKey, signature);
console.log(isValid); // true

这为高安全需求的加密应用提供了新选择。

3. Zlib：zstdCompress 和 zstdDecompress 字典支持

Zlib 模块的 zstdCompress 和 zstdDecompress 函数新增字典支持，通过预定义常见模式提升压缩效率。

示例：

const zlib = require('zlib');
const dict = Buffer.from('common patterns'); // 自定义字典

const compressed = zlib.zstdCompressSync('data to compress', { dictionary: dict });
const decompressed = zlib.zstdDecompressSync(compressed, { dictionary: dict });
console.log(decompressed.toString()); // 'data to compress'

这优化了数据传输和存储场景。

4. HTTP：新增 keepAliveTimeoutBuffer 选项

HTTP 服务器新增 keepAliveTimeoutBuffer 选项，用于缓冲 keep-alive 超时，提升连接管理效率。

示例：

const http = require('http');

const server = http.createServer((req, res) => res.end('Hello'));
server.keepAliveTimeoutBuffer = 1000; // 缓冲 1 秒
server.listen(3000);

这有助于减少网络抖动，提高服务器稳定性。

5. Lib：文档废弃 http*

内部 HTTP 模块的 _http_* 函数已被文档废弃，鼓励使用标准 API，提升代码规范性。

6. FS：移植 SonicBoom 作为 Utf8Stream

FS 模块引入了 Utf8Stream，通过移植 SonicBoom 提升文件流处理性能，适合高吞吐量场景。

7. 其他改进

  • 基准测试：优化基准脚本，提升测试效率。
  • 依赖更新：升级 ada 到 3.2.7、OpenSSL 到 3.5.2，确保安全性。
  • 文档优化：修复 Pbkdf2Params 和 x509.keyUsage 的文档问题。

最后

Node.js 新版本从 Crypto 的后量子算法到 HTTP 的连接优化，这些功能让你的项目更健壮、更高效。快来升级到 v24.6.0，体验这些实用的新特性吧！

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

往期精彩推荐

昨天以前首页

🚀🚀🚀 Webpack 项目也可以引入大模型问答了！感谢 Rsdoctor 1.2 ！

✇掘金 前端
作者 萌萌哒草头将军
2025年8月12日 19:10

前言

今天发现 Rsdoctor 发布了 1.2 版本预览版本，带来很多功能外还支持 Webapck，所以我们今天来看看更新哪些内容吧！

往期精彩推荐

正文

本次更新通过深入的拼接模块分析、Gzip 压缩大小支持和优化的 Treemap 可视化，帮助开发者更准确地了解构建产物，优化代码分割策略。此外，Rsdoctor MCP 引入了基于 LLM 的智能 Q&A 功能，

以下是 Rsdoctor 1.2 的核心更新和功能的详细介绍。

1. 深入的拼接模块分析

在 Rspack 构建过程中，部分模块会被提升或聚合为单一闭包，形成拼接模块（concatenated modules），以提高浏览器执行效率并减小产物体积。然而，此前 Rsdoctor 无法深入分析这些模块的内部结构，因为它们无法通过 AST 解析进一步拆分。

Rsdoctor 1.2 新增了对拼接模块大小的分析功能，开发者可以：

  • 精准分析子模块：了解 tree shaking 和压缩后子模块的真实构建大小。
  • 优化代码分割：通过分析拼接模块对最终 bundle 大小的影响，优化分包策略。

对于 Rspack (>=1.4.11) 项目，Rsdoctor 插件增强了 source map 能力，无需显式启用即可分析拼接模块。Webpack 项目则仍需启用 source map。

示例：

// rspack.config.js
const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
  plugins: [
    process.env.RSDOCTOR && new RsdoctorRspackPlugin({
      // 启用拼接模块分析
    }),
  ].filter(Boolean),
};

2. Gzip 压缩大小支持

为了更准确地反映生产环境的资源体积，Rsdoctor 1.2 新增了 Gzip 压缩大小分析功能。开发者可以在 Bundle Size 页面和 Treemap 页面查看：

  • 原始大小与 Gzip 压缩大小的对比。
  • 更精确的生产环境优化数据。

gzip

3. 优化的 Treemap 可视化

Treemap 是开发者分析 bundle 组成的核心工具，但此前 Rsdoctor 的 Treemap 视图基于 webpack-bundle-analyzer，分析效率较低，页面加载速度慢。

Treemap

Rsdoctor 1.2 推出了全新的经典 Treemap 视图，带来以下改进：

  • 更快的加载速度：无需重复处理分析数据，提升整体效率。
  • 直观的可视化：更清晰地展示 bundle 组成、资源和模块比例。
  • 交互性增强：支持模块资源搜索和点击放大，方便定位特定模块。

开发者可以通过 Treemap 视图快速识别资源分布，优化项目结构。

4. Rsdoctor MCP：智能 Q&A 分析

Rsdoctor 1.2 延续了 1.1 版本引入的 MCP（Model Context Protocol）支持，通过 LLM 提供智能化的构建分析。开发者可以通过自然语言提问快速获取分析结果，例如：

  • “哪些包的体积最大？”
  • “为什么这个模块没有被 tree-shaken？”

Rsdoctor MCP 结合了 Rsdoctor 的分析能力和 LLM 的智能理解，支持以下核心功能：

  • 产物信息查询
  • 依赖关系分析
  • 优化建议生成
  • 编译性能分析
  • Tree shaking 分析

使用 Rsdoctor

npm install @rsdoctor/rspack-plugin@1.2 -D

在 rspack.config.js 或 webpack.config.js 中注册 Rsdoctor 插件：

const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');

module.exports = {
  plugins: [
    process.env.RSDOCTOR && new RsdoctorRspackPlugin({
      // 插件配置
    }),
  ].filter(Boolean),
};

运行构建命令

RSDOCTOR=true npm run build

最后

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

往期精彩推荐

❌
❌