前端基准测试报告#

测试环境#

• 平台: Windows
• 浏览器: 通过 Vitest Browser 模式测试
• 测试时间: 2026-02-02

测试包#

• @veaba/qrcode-js - TypeScript 实现，适用于浏览器
• @veaba/qrcode-wasm - Rust WASM 实现，适用于浏览器

🎯 场景选择器#

不知道选哪个？使用下面的场景选择器：

📊 特性对比#

📦 包体积对比#

API 兼容性#

@veaba/qrcode-js 和 @veaba/qrcode-wasm 提供完全相同的 API：

// 两者都支持相同的接口
import { QRCode } from '@veaba/qrcode-js'; // 或 '@veaba/qrcode-wasm'

const qr = new QRCode('https://example.com');
const svg = qr.toSVG();
const dataURL = qr.toDataURL();

性能特点#

@veaba/qrcode-js#

• 优点:

  • 纯 TypeScript 实现，无需额外加载 WASM 文件
  • 包体积较小 (~15 KB)
  • 启动速度快
  • 兼容性更好

• 适用场景:

  • 对包体积敏感的应用
  • 需要快速启动的场景
  • 简单的 QRCode 生成需求

@veaba/qrcode-wasm#

• 优点:

  • Rust 实现，理论上性能更好
  • 适合大量 QRCode 生成场景

• 注意事项:

  • 需要加载 WASM 文件 (~45 KB 总计)
  • 首次加载可能有延迟

使用建议#

测试运行方式#

# 运行前端测试
pnpm run test:browser

# 运行单元测试
pnpm run test:unit

基准测试数据#

注：前端基准测试数据通过浏览器环境获取，实际性能会因设备和浏览器版本而异。

测试场景#

1. 单条 QRCode 生成 - 测试不同长度文本的生成性能
2. 批量 QRCode 生成 - 测试同时生成多个 QRCode 的性能
3. SVG 输出 - 测试生成 SVG 格式的时间
4. DataURL 输出 - 测试生成 DataURL 格式的时间
5. 纠错级别 - 测试不同纠错级别下的性能

推荐配置#

// vite.config.js 或类似配置
export default {
  optimizeDeps: {
    include: ['@veaba/qrcode-js']
  },
  // 对于 WASM 版本，需要配置 wasm 加载
  server: {
    fs: {
      allow: ['..']
    }
  }
}

注意: 详细的性能数据需要通过浏览器实际测试获取。建议使用 Chrome DevTools 的 Performance 面板进行更详细的性能分析。

最后更新: 2026-02-02