Web Workers
以下示例展示了 Univer 中使用 Worker 的基本用法。
在 Sheets 中，Worker 常用于承载公式计算等计算密集型任务。将公式计算放到 Worker 进程中执行，可以减少主线程压力，避免工作簿公式较多时影响页面渲染和交互。
预设模式
UniverSheetsCorePreset 配置参数中的 workerURL 选项可以指定 Worker 的 URL 地址并启用 Worker 模式。
示例：sheets-core-with-worker
此处示例引入了 sheets-filter 的预设包，是因为公式 SUBTOTAL 计算时受到 sheets-filter 筛选隐藏行的影响。当公式计算在 Worker 中执行时，sheets-filter 也需要在 Worker 中执行。
TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'import { UniverSheetsFilterPreset } from '@univerjs/preset-sheets-filter'import UniverPresetSheetsFilterZhCN from '@univerjs/preset-sheets-filter/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-filter/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetSheetsCoreZhCN, UniverPresetSheetsFilterZhCN, ), }, presets: [ UniverSheetsCorePreset({ workerURL: new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' }), }), UniverSheetsFilterPreset(), ],})univerAPI.createWorkbook({ name: 'Test Sheet' })TypeScript
import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'import { UniverSheetsCoreWorkerPreset } from '@univerjs/preset-sheets-core/worker'import UniverPresetSheetsFilterZhCN from '@univerjs/preset-sheets-filter/locales/zh-CN'import { UniverSheetsFilterWorkerPreset } from '@univerjs/preset-sheets-filter/worker'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetSheetsCoreZhCN, UniverPresetSheetsFilterZhCN, ), }, presets: [ UniverSheetsCoreWorkerPreset(), UniverSheetsFilterWorkerPreset(), ],})示例：sheets-collaboration-with-worker
TypeScript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedZhCN from '@univerjs/preset-sheets-advanced/locales/zh-CN'import { UniverSheetsCollaborationPreset } from '@univerjs/preset-sheets-collaboration'import UniverPresetSheetsCollaborationZhCN from '@univerjs/preset-sheets-collaboration/locales/zh-CN'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import UniverPresetSheetsDrawingZhCN from '@univerjs/preset-sheets-drawing/locales/zh-CN'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'import '@univerjs/preset-sheets-drawing/lib/index.css'import '@univerjs/preset-sheets-advanced/lib/index.css'import '@univerjs/preset-sheets-collaboration/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetSheetsCoreZhCN, UniverPresetSheetsDrawingZhCN, UniverPresetSheetsAdvancedZhCN, UniverPresetSheetsCollaborationZhCN, ), }, collaboration: true, presets: [ UniverSheetsCorePreset({ workerURL: new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' }), }), UniverSheetsDrawingPreset({ collaboration: true, }), UniverSheetsAdvancedPreset({ useWorker: true, license: process.env.UNIVER_CLIENT_LICENSE || 'your license.txt', }), UniverSheetsCollaborationPreset({ }), ],})TypeScript
import UniverPresetSheetsAdvancedZhCN from '@univerjs/preset-sheets-advanced/locales/zh-CN'import { UniverSheetsAdvancedWorkerPreset } from '@univerjs/preset-sheets-advanced/worker'import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'import { UniverSheetsCoreWorkerPreset } from '@univerjs/preset-sheets-core/worker'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'createUniver({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( UniverPresetSheetsCoreZhCN, UniverPresetSheetsAdvancedZhCN, ), }, presets: [ UniverSheetsCoreWorkerPreset(), UniverSheetsAdvancedWorkerPreset({ license: process.env.UNIVER_CLIENT_LICENSE || 'your license.txt', }), ],})插件模式
以安装和基本使用中的插件模式为基础，保留主线程的渲染与 UI 插件。将已有的三个计算相关插件注册修改为以下配置，并在创建工作簿前加入主线程 RPC 插件。
TypeScript
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'import { UniverRPCMainThreadPlugin } from '@univerjs/rpc'import { UniverSheetsPlugin } from '@univerjs/sheets'import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'univer.registerPlugin(UniverRPCMainThreadPlugin, { workerURL: new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' }),})univer.registerPlugin(UniverFormulaEnginePlugin, { notExecuteFormula: true })univer.registerPlugin(UniverSheetsPlugin, { notExecuteFormula: true })univer.registerPlugin(UniverSheetsFormulaPlugin, { notExecuteFormula: true })Worker 只注册下面的数据与计算插件，不注册 UI 或渲染插件。主线程的 notExecuteFormula: true 表示将计算交给 Worker。
TypeScript
import { LocaleType, Univer } from '@univerjs/core'import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'import { UniverRPCWorkerThreadPlugin } from '@univerjs/rpc'import { UniverSheetsPlugin } from '@univerjs/sheets'import { UniverRemoteSheetsFormulaPlugin } from '@univerjs/sheets-formula'const univer = new Univer({ locale: LocaleType.ZH_CN })univer.registerPlugin(UniverSheetsPlugin, { onlyRegisterFormulaRelatedMutations: true })univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverRPCWorkerThreadPlugin)univer.registerPlugin(UniverRemoteSheetsFormulaPlugin)使用筛选功能时，两端都需要注册 @univerjs/sheets-filter 中的 UniverSheetsFilterPlugin，让 SUBTOTAL 等公式感知筛选后的行。UniverSheetsFilterUIPlugin 只在主线程注册。
使用透视表时，两端还需注册 UniverLicensePlugin、UniverProFormulaEnginePlugin 和 UniverSheetsPivotTablePlugin。后两个插件在主线程配置 notExecuteFormula: true，在 Worker 中配置 false。两端都传入许可证，透视表 UI 留在主线程；自定义公式的实现也需在两端的公式引擎中注册。
你觉得这篇文档如何？