Vercel Zero-Native 技术内幕：用 Zig 终结桌面应用臃肿时代

一、为什么 Vercel 要用 Zig 重写桌面应用 Runtime？

1.1 一个改变技术选型的故事

2025 年底，Roc 编程语言创始人 Richard Feldman 做了一个让很多人意外的决定：将整个 Roc 编译器从 Rust 重写为 Zig。他在公告中写道：

"Rust 的编译速度很慢，而 Zig 的编译速度很快。等待构建一个测试就得花上几秒钟，这种体验实在令人不快。"

这段话在 Hacker News 上引发了激烈讨论，也影响了 Vercel Labs 的技术选型。2026 年 6 月，Vercel 开源了 zero-native——一个基于 Zig 的跨平台桌面应用框架。

1.2 Electron 的核心困境

Electron 的设计决定了它必然臃肿：每个应用都携带完整的 Chromium + Node.js 运行时。Hello World 应用动辄 80-150MB，内存占用 100-300MB 起步。

Zero-native 的解决方案：绕过 Electron 运行时，直接使用操作系统原生的 WebView。

1.3 真实性能数据对比

指标	Electron 28	Tauri 2.0	Zero-Native 0.1
空白应用体积	87 MB	4.1 MB	2.6 MB
冷启动时间	1.8s	0.5s	0.35s
内存占用（单窗口）	165 MB	38 MB	28 MB
CPU 占用（空闲）	2-5%	0.5-1%	0.3-0.8%

二、架构深度解析

2.1 双线程架构

Zero-native 采用 Web 前端 + Zig 后端的双线程模型，通过 JSON-RPC 2.0 进行 IPC 通信。

关键创新：

前端自由度：支持 React、Vue、Svelte 等任意 Web 框架
Zig 后端：提供文件系统、网络、数据库等原生能力
原生 WebView：无需打包 Chromium

2.2 Zig vs Rust：为什么选择 Zig？

编译速度实测：

# Rust (cargo 1.82)
cargo build --release
# 全量编译: 14.2s
# 增量编译（改一行）: 5.8s

# Zig (zig 0.14)
zig build -Doptimize=ReleaseFast
# 全量编译: 3.1s
# 增量编译（改一行）: 0.4s

C ABI 互操作对比：

// Zig 直接调用 C 库，零成本
const c = @cImport({
    @cInclude("sqlite3.h");
});

pub fn main() !void {
    var db: ?*c.sqlite3 = null;
    _ = c.sqlite3_open("data.db", &db);
}

// Rust 需要第三方 crate 或手写 FFI
use rusqlite::{Connection, Result};

fn main() -> Result<()> {
    let conn = Connection::open("data.db")?;
    Ok(())
}

三、完整代码实战

3.1 创建项目

npm install -g @vercel/zero-cli
zero new db-manager --template react-ts
cd db-manager

3.2 后端 SQLite 封装

const std = @import("std");
const c = @cImport({ @cInclude("sqlite3.h"); });

pub const Database = struct {
    db: *c.sqlite3,
    allocator: std.mem.Allocator,
    
    pub fn open(allocator: std.mem.Allocator, path: []const u8) !Database {
        var db: ?*c.sqlite3 = null;
        const path_z = try allocator.dupeZ(u8, path);
        defer allocator.free(path_z);
        
        const result = c.sqlite3_open(path_z.ptr, &db);
        if (result != c.SQLITE_OK) return error.OpenFailed;
        
        return .{ .db = db.?, .allocator = allocator };
    }
    
    pub fn query(self: *Database, sql: []const u8) !QueryResult {
        var stmt: ?*c.sqlite3_stmt = null;
        const sql_z = try self.allocator.dupeZ(u8, sql);
        defer self.allocator.free(sql_z);
        
        _ = c.sqlite3_prepare_v2(self.db, sql_z.ptr, -1, &stmt, null);
        defer _ = c.sqlite3_finalize(stmt);
        
        var rows = std.ArrayList(Row).init(self.allocator);
        
        while (c.sqlite3_step(stmt) == c.SQLITE_ROW) {
            const col_count = c.sqlite3_column_count(stmt.?);
            var row = Row.init(self.allocator);
            
            var i: c_int = 0;
            while (i < col_count) : (i += 1) {
                const col_name = c.sqlite3_column_name(stmt.?, i);
                const key = std.mem.span(col_name);
                const value = try self.readColumn(stmt.?, i);
                try row.put(key, value);
            }
            try rows.append(row);
        }
        
        return .{ .rows = try rows.toOwnedSlice() };
    }
};

3.3 前端 React 组件

import { invoke } from '@vercel/zero-native';

export function DatabaseManager() {
  const [results, setResults] = useState<Row[]>([]);
  
  const executeQuery = async () => {
    const result = await invoke<QueryResult>('db_query', { sql: query });
    setResults(result.rows);
  };
  
  return (
    <div className="app">
      <textarea value={query} onChange={e => setQuery(e.target.value)} />
      <button onClick={executeQuery}>执行</button>
      <table>{/* 渲染结果 */}</table>
    </div>
  );
}

四、生产部署

4.1 代码签名

# macOS
codesign --deep --force --sign "Developer ID Application: Your Name" dist/app.app
xcrun notarytool submit dist/app.dmg --apple-id your@email.com --wait

# Windows
signtool sign /f cert.pfx dist/app.exe