Trabajadores web
Los siguientes ejemplos demuestran el uso básico de Worker1 en Univer.
En Sheets, los Workers se usan comúnmente para tareas de computación intensiva, como el cálculo de fórmulas. Ejecutar el cálculo de fórmulas en un proceso de trabajo puede reducir la presión sobre el hilo principal y mantener la representación de la página y las interacciones receptivas cuando un libro contiene muchas fórmulas.
Modo predeterminado
La opción workerURL en la configuración UniverSheetsCorePreset le permite especificar la URL del trabajador y habilitar el modo de trabajador.
Ejemplo: hojas-núcleo-con-trabajador
Este ejemplo importa el sheets-filter paquete preestablecido porque el cálculo de la fórmula SUBTOTAL se ve afectado por filas ocultas en el filtro de hojas. Cuando los cálculos de fórmulas se ejecutan en un trabajador, el filtro de hojas también debe ejecutarse en el trabajador.
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' })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(), ],})Ejemplo: hojas-colaboración-con-trabajador
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({ }), ],})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', }), ],})Modo plugin
Parte de la configuración del modo plugin de la instalación. Mantén los plugins de renderizado e interfaz en el hilo principal. Sustituye los tres registros de cálculo siguientes y añade el plugin RPC antes de crear el libro.
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 })El Worker solo contiene los plugins de datos y cálculo que se muestran abajo. No registres plugins de interfaz ni renderizado. notExecuteFormula: true delega el cálculo al Worker.
import { LocaleType, Univer } from '@univerjs/core'import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula/worker'import { UniverRPCWorkerThreadPlugin } from '@univerjs/rpc/worker'import { UniverSheetsPlugin } from '@univerjs/sheets/worker'import { UniverRemoteSheetsFormulaPlugin } from '@univerjs/sheets-formula/worker'const univer = new Univer({ locale: LocaleType.ES_ES })univer.registerPlugin(UniverSheetsPlugin, { onlyRegisterFormulaRelatedMutations: true })univer.registerPlugin(UniverFormulaEnginePlugin)univer.registerPlugin(UniverRPCWorkerThreadPlugin)univer.registerPlugin(UniverRemoteSheetsFormulaPlugin)Con filtros, registre UniverSheetsFilterPlugin en ambos hilos para que SUBTOTAL tenga en cuenta las filas filtradas: impórtelo de @univerjs/sheets-filter en el hilo principal y de @univerjs/sheets-filter/worker en el Worker. Mantenga UniverSheetsFilterUIPlugin en el hilo principal.
Use estas entradas para los plugins de cálculo adicionales del Worker. El hilo principal usa la raíz de cada paquete. Mantenga alineadas todas las versiones del SDK.
import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula/worker'import { UniverSheetsPivotChartWorkerPlugin } from '@univerjs-pro/sheets-pivot-chart/worker'import { UniverSheetsPivotTablePlugin } from '@univerjs-pro/sheets-pivot/worker'import { UniverSheetsSlicerPlugin } from '@univerjs-pro/sheets-slicer/worker'import { UniverSheetsTablePlugin } from '@univerjs/sheets-table/worker'Para tablas dinámicas, sustituya UniverFormulaEnginePlugin por UniverProFormulaEnginePlugin en ambos hilos y registre también UniverLicensePlugin y UniverSheetsPivotTablePlugin. Configure notExecuteFormula: true en el motor Pro y el plugin de tablas dinámicas del hilo principal, y false en el Worker. Proporcione la licencia en ambos entornos, mantenga la interfaz en el hilo principal y registre las funciones personalizadas en ambos motores.
Footnotes
-
Un Web Worker ejecuta JavaScript fuera del hilo principal del navegador y se comunica mediante mensajes. No puede acceder directamente al DOM; mover los cálculos no mueve la interfaz del editor. ↩
¿Cómo es esta guía?