ByteNoteByteNote
字

字节笔记本

2026年2月22日

PGlite：在浏览器中运行 PostgreSQL 的 WASM 嵌入式数据库

#开源工具

PGlite 是一个将 PostgreSQL 编译为 WebAssembly (WASM) 的嵌入式数据库库，让你可以在浏览器、Node.js 和 Bun 环境中运行完整的 Postgres 数据库，无需安装任何其他依赖。它体积小巧（Gzip 压缩后不到 3MB），支持多种 PostgreSQL 扩展包括 pgvector，是本地开发和边缘计算场景的理想选择。

什么是 PGlite

PGlite 是由 ElectricSQL 开发的开源项目，它将 PostgreSQL 数据库完整编译为 WASM 格式，打包成一个 TypeScript/JavaScript 客户端库。与传统的 "浏览器中的 Postgres" 项目不同，PGlite 不使用 Linux 虚拟机，而是直接将 Postgres 运行在 WASM 环境中。

该项目在 GitHub 上已获得超过 14,000 个 Star，采用 Apache 2.0 和 PostgreSQL 双许可证开源。

核心特性

  • 轻量级：完整的 WASM Postgres 构建，Gzip 压缩后不到 3MB
  • 可扩展：支持动态扩展加载机制，包括 pgvector 等流行扩展
  • 响应式：内置数据加载、同步和实时查询原语支持
  • 跨平台：支持浏览器、Node.js、Bun 和 Deno 环境
  • 零依赖：无需安装其他依赖即可运行
  • 持久化支持：支持内存模式、文件系统持久化（Node/Bun）和 IndexedDB（浏览器）

安装与使用

Node.js/Bun/Deno 环境

bash
npm install @electric-sql/pglite

创建内存数据库：

javascript
import { PGlite } from '@electric-sql/pglite'

const db = new PGlite()
const result = await db.query("SELECT 'Hello world' as message;")
console.log(result.rows) // [{ message: "Hello world" }]

持久化到文件系统：

javascript
const db = new PGlite('./path/to/pgdata')

浏览器环境

通过 CDN 使用：

javascript
import { PGlite } from 'https://cdn.jsdelivr.net/npm/@electric-sql/pglite/dist/index.js'

// 内存模式
const db = new PGlite()

// 或持久化到 IndexedDB
const db = new PGlite('idb://my-pgdata')

查询数据

PGlite 提供两种查询方法：.query() 和 .exec()。

使用 exec 执行多语句

适合迁移和批量插入：

javascript
await db.exec(`
  CREATE TABLE IF NOT EXISTS todo (
    id SERIAL PRIMARY KEY,
    task TEXT,
    done BOOLEAN DEFAULT false
  );
  INSERT INTO todo (task, done) VALUES ('Install PGlite', true);
  INSERT INTO todo (task) VALUES ('Build awesome app');
`)

使用 query 进行参数化查询

javascript
const ret = await db.query(
  'SELECT * FROM todo WHERE id = $1',
  [1]
)
console.log(ret.rows)

更新数据：

javascript
await db.query(
  'UPDATE todo SET task = $2, done = $3 WHERE id = $1',
  [1, 'Updated task', true]
)

适用场景

1. 单元测试和 CI 测试

PGlite 启动和销毁速度极快，非常适合单元测试场景。你可以为每个测试用例创建独立的数据库实例：

javascript
// 每个测试使用全新的数据库
const testDb = new PGlite()

2. 本地开发

作为完整 PostgreSQL 的轻量级替代方案，简化开发环境配置，无需安装和配置 PostgreSQL 服务器。

3. 远程开发和 Web 容器

由于 PGlite 非常轻量，可以轻松嵌入到远程容器化开发环境或浏览器中的 WebContainers。

4. 端侧 AI 和 RAG

PGlite 完整支持 pgvector 扩展，支持在本地或边缘设备上运行检索增强生成（RAG）工作流，为 AI 应用提供向量存储和相似性搜索能力。

高级功能

实时查询（Live Queries）

PGlite 提供实时查询扩展，当底层数据变化时自动更新 UI：

javascript
import { live } from '@electric-sql/pglite/live'

const db = new PGlite({
  extensions: { live }
})

// 订阅实时查询
const unsub = await db.live.query(
  'SELECT * FROM todo WHERE done = false',
  [],
  (result) => {
    console.log('待办事项更新:', result.rows)
  }
)

框架集成

PGlite 提供 React 和 Vue 的官方 Hooks：

javascript
// React Hook 示例
import { usePGlite } from '@electric-sql/pglite-react'

function TodoList() {
  const db = usePGlite()
  const { results } = useLiveQuery(
    db.query('SELECT * FROM todo')
  )
  // ...
}

多标签页共享

PGlite 提供 Multi-tab Worker，支持在多个浏览器标签页之间共享同一个数据库实例：

javascript
import { PGliteWorker } from '@electric-sql/pglite/worker'

const db = new PGliteWorker(
  new Worker(new URL('./pglite-worker.js', import.meta.url))
)

支持的扩展

PGlite 支持多种 PostgreSQL 扩展：

  • pgvector：向量相似性搜索
  • uuid-ossp：UUID 生成
  • postgis：地理空间数据（实验性）
  • full-text search：全文搜索

在线体验

你可以在以下平台在线体验 PGlite：

项目链接

总结

PGlite 为 Web 开发者提供了一种全新的数据库使用方式。它将 PostgreSQL 的强大功能带到浏览器和边缘环境，同时保持极小的体积和零依赖特性。无论是用于测试、本地开发还是构建边缘 AI 应用，PGlite 都是一个值得尝试的优秀开源项目。

开源工具
上一篇

基于 SSR/SSG + Gatsby 的前端 SEO 优化

下一篇

PGlite：在浏览器中运行 PostgreSQL 的 WASM 嵌入式数据库

分享: