Web SDK

Web Workers

Les exemples suivants illustrent l’utilisation de base des Workers1 dans Univer.

Dans Sheets, les Workers servent généralement à exécuter des tâches de calcul intensives, comme le calcul des formules. L’exécution de ce calcul dans un processus Worker réduit la charge du thread principal et préserve la fluidité du rendu et des interactions lorsqu’un classeur contient de nombreuses formules.

Mode Plugin

Partez de la configuration du mode plugin de l’installation. Gardez les plugins de rendu et d’interface sur le thread principal. Remplacez les trois enregistrements de calcul ci-dessous et ajoutez le plugin RPC avant de créer le classeur.

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 })

Le Worker ne contient que les plugins de données et de calcul ci-dessous. N’y enregistrez aucun plugin UI ou de rendu. notExecuteFormula: true délègue le calcul au 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.FR_FR })univer.registerPlugin(UniverSheetsPlugin, { onlyRegisterFormulaRelatedMutations: true })univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverRPCWorkerThreadPlugin)univer.registerPlugin(UniverRemoteSheetsFormulaPlugin)

Avec les filtres, enregistrez UniverSheetsFilterPlugin de @univerjs/sheets-filter des deux côtés pour que SUBTOTAL tienne compte des lignes filtrées. Gardez UniverSheetsFilterUIPlugin sur le thread principal.

Pour les tableaux croisés, enregistrez aussi UniverLicensePlugin, UniverProFormulaEnginePlugin et UniverSheetsPivotTablePlugin des deux côtés. Pour les deux derniers, utilisez notExecuteFormula: true sur le thread principal et false dans le Worker. Fournissez la licence aux deux runtimes. Gardez l’UI sur le thread principal et enregistrez les formules personnalisées dans les deux moteurs.

Mode Preset

L’option workerURL de la configuration de UniverSheetsCorePreset permet de spécifier l’URL du Worker et d’activer le mode Worker.

Exemple : sheets-core-with-worker

Cet exemple importe le package de preset sheets-filter, car le calcul de la formule SUBTOTAL tient compte des lignes masquées par sheets-filter. Lorsque le calcul des formules est exécuté dans un Worker, sheets-filter doit également y être exécuté.

TypeScript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsFilterPreset } from '@univerjs/preset-sheets-filter'import UniverPresetSheetsFilterEnUS from '@univerjs/preset-sheets-filter/locales/en-US'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.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetSheetsCoreEnUS,      UniverPresetSheetsFilterEnUS,    ),  },  presets: [    UniverSheetsCorePreset({      workerURL: new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' }),    }),    UniverSheetsFilterPreset(),  ],})univerAPI.createWorkbook({ name: 'Test Sheet' })
TypeScript
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsCoreWorkerPreset } from '@univerjs/preset-sheets-core/worker'import UniverPresetSheetsFilterEnUS from '@univerjs/preset-sheets-filter/locales/en-US'import { UniverSheetsFilterWorkerPreset } from '@univerjs/preset-sheets-filter/worker'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetSheetsCoreEnUS,      UniverPresetSheetsFilterEnUS,    ),  },  presets: [    UniverSheetsCoreWorkerPreset(),    UniverSheetsFilterWorkerPreset(),  ],})

Exemple : sheets-collaboration-with-worker

TypeScript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US'import { UniverSheetsCollaborationPreset } from '@univerjs/preset-sheets-collaboration'import UniverPresetSheetsCollaborationEnUS from '@univerjs/preset-sheets-collaboration/locales/en-US'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US'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.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetSheetsCoreEnUS,      UniverPresetSheetsDrawingEnUS,      UniverPresetSheetsAdvancedEnUS,      UniverPresetSheetsCollaborationEnUS,    ),  },  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 UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US'import { UniverSheetsAdvancedWorkerPreset } from '@univerjs/preset-sheets-advanced/worker'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsCoreWorkerPreset } from '@univerjs/preset-sheets-core/worker'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'createUniver({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      UniverPresetSheetsCoreEnUS,      UniverPresetSheetsAdvancedEnUS,    ),  },  presets: [    UniverSheetsCoreWorkerPreset(),    UniverSheetsAdvancedWorkerPreset({      license: process.env.UNIVER_CLIENT_LICENSE || 'your license.txt',    }),  ],})

Footnotes

  1. Un Web Worker exécute JavaScript hors du thread principal du navigateur et communique par messages. Il ne peut pas accéder directement au DOM : déplacer les calculs ne déplace pas l’interface de l’éditeur. ↩

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.