PGlite项目中使用Web Worker加载PostgreSQL扩展的实践指南

在基于PGlite开发浏览器扩展时，开发者可能会遇到PostgreSQL扩展(如pg_trgm)无法在Web Worker中正常加载的问题。本文将详细介绍如何正确配置Vite构建环境，使PostgreSQL扩展能够在Web Worker中正常工作。

问题背景

PGlite是一个轻量级的PostgreSQL实现，可以在浏览器环境中运行。当开发者尝试在Web Worker中使用pg_trgm等PostgreSQL扩展时，可能会遇到"extension is not available"的错误提示。这是因为扩展的加载方式需要特定的配置才能正常工作。

解决方案

1. 正确的Worker脚本编写

Worker脚本必须放置在项目的src目录下，而不是public目录，以确保它能够被Vite正确处理。脚本内容应如下：

import { PGlite } from '@electric-sql/pglite'
import { worker } from '@electric-sql/pglite/worker'
import { pg_trgm } from '@electric-sql/pglite/contrib/pg_trgm'

worker({
  async init(options) {
    const pg = new PGlite('opfs-ahp://neotab/neotab.db', {
      ...options,
      extensions: { pg_trgm },
    })
    return pg
  },
})

关键点在于直接在Worker初始化时通过extensions参数指定要加载的扩展。

2. 主线程中的Worker初始化

在主线程中，需要使用特定的方式导入Worker：

import PGWorker from './worker.js?worker'

export const pglite = new PGliteWorker(
  new PGWorker({
    name: 'neotab-worker',
  }),
  {
    dataDir: 'opfs-ahp://neotab/neotab.db',
    relaxedDurability: true,
  }
)

注意这里不需要在主线程中再次指定extensions参数，因为扩展已经在Worker脚本中配置。

3. Vite配置调整

在vite.config.ts中需要进行以下关键配置：

worker: {
  format: 'es', // 必须设置为ES模块格式
},
optimizeDeps: {
  exclude: ['@electric-sql/pglite', '@electric-sql/pglite/worker'],
}

ES模块格式对于Worker的正常运行至关重要，同时需要将PGlite相关包排除在依赖优化之外。

实现原理

1. 模块格式要求：Web Worker需要以ES模块格式运行，因为PGlite的扩展系统依赖于ES模块的导入机制。

2. 构建过程：将Worker脚本放在src目录下确保它参与Vite的构建过程，而不是被直接复制到输出目录。

3. 扩展加载：扩展需要在Worker初始化时明确指定，因为Worker环境与主线程隔离，无法共享模块状态。

进阶应用

对于需要在浏览器扩展的Service Worker中使用的场景，可以考虑以下方案：

1. 使用SharedWorker实现主线程和Service Worker之间的通信
2. 将数据库操作封装为API，通过postMessage进行交互
3. 考虑使用IndexedDB作为中间存储层

总结

在PGlite项目中使用Web Worker加载PostgreSQL扩展需要注意模块格式、构建配置和初始化方式。通过正确的配置，可以充分发挥PGlite在浏览器环境中的能力，实现复杂的全文搜索等功能。对于更复杂的应用场景，可以结合Web Worker的通信机制构建更强大的架构。