Web Workers support solution

Web Workers Support Solution

Vite.js, as a modern front-end build tool, provides out-of-the-box support for Web Workers. Web Workers allow scripts to run in background threads, avoiding blocking the main thread and significantly improving performance for complex computations. Vite simplifies the Worker usage process through special import syntax and build optimizations.

Basic Usage

Vite supports two ways to import Web Workers: via the new Worker constructor or by directly importing Worker scripts. The latter is recommended as Vite provides special handling for it:

// Main thread code
const worker = new Worker(new URL('./worker.js', import.meta.url), {
  type: 'module'
});

worker.postMessage({ command: 'start' });
worker.onmessage = (e) => {
  console.log('Received:', e.data);
};

Corresponding Worker script:

// worker.js
self.onmessage = (e) => {
  if (e.data.command === 'start') {
    const result = heavyCalculation();
    self.postMessage({ status: 'done', result });
  }
};

function heavyCalculation() {
  // Simulate heavy computation
  let sum = 0;
  for (let i = 0; i < 1e9; i++) {
    sum += Math.sqrt(i);
  }
  return sum;
}

Inline Worker Solution

For small Worker logic, Vite supports inline Worker mode to avoid separate files:

// Create inline Worker using Blob URL
const workerCode = `
  self.onmessage = (e) => {
    const result = e.data * 2;
    self.postMessage(result);
  };
`;

const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

worker.postMessage(10);
worker.onmessage = (e) => {
  console.log('Result:', e.data); // Outputs 20
};

Worker Modular Support

Vite allows using ES module syntax in Workers by specifying type: 'module' in the Worker constructor:

// Modular Worker example (worker-module.js)
import { calculate } from './worker-utils.js';

self.onmessage = async (e) => {
  const result = await calculate(e.data);
  self.postMessage(result);
};

Corresponding utility module:

// worker-utils.js
export async function calculate(data) {
  // Simulate async computation
  return new Promise(resolve => {
    setTimeout(() => resolve(data * 3), 1000);
  });
}

SharedWorker Support

Vite also supports SharedWorker, allowing multiple browser contexts to share the same Worker instance:

// Main thread
const sharedWorker = new SharedWorker(new URL('./shared-worker.js', import.meta.url), {
  type: 'module'
});

sharedWorker.port.postMessage('Hello from tab 1');
sharedWorker.port.onmessage = (e) => {
  console.log('Shared response:', e.data);
};

SharedWorker implementation:

// shared-worker.js
const connections = new Set();

self.onconnect = (e) => {
  const port = e.ports[0];
  connections.add(port);

  port.onmessage = (e) => {
    // Broadcast to all connections
    connections.forEach(conn => {
      if (conn !== port) {
        conn.postMessage(`Echo: ${e.data}`);
      }
    });
  };
};

Worker Hot Module Replacement

In development mode, Vite provides Hot Module Replacement (HMR) support for Workers:

// HMR Worker example
const worker = new Worker(new URL('./hmr-worker.js', import.meta.url));

if (import.meta.hot) {
  import.meta.hot.accept('./hmr-worker.js', (newWorker) => {
    worker.terminate();
    worker = newWorker;
  });
}

Advanced Configuration Options

Customize Worker handling in vite.config.js:

// vite.config.js
export default {
  worker: {
    format: 'es', // Output format
    plugins: [/* Worker-specific plugins */],
    rollupOptions: {
      output: {
        // Worker file naming rules
        entryFileNames: 'worker-assets/[name]-[hash].js'
      }
    }
  }
};

Worker and Comlink Integration

Using the Comlink library greatly simplifies Worker communication:

// Main thread
import * as Comlink from 'comlink';
const worker = new Worker(new URL('./comlink-worker.js', import.meta.url));
const api = Comlink.wrap(worker);

// Directly call Worker methods
const result = await api.calculate(42);
console.log(result);

Corresponding Worker side:

// comlink-worker.js
import * as Comlink from 'comlink';

const api = {
  calculate(x) {
    return x * 2;
  }
};

Comlink.expose(api);

Performance Optimization Tips

1. Worker Pool Pattern: Reuse Worker instances to avoid frequent creation/destruction

class WorkerPool {
  constructor(size, workerUrl) {
    this.pool = [];
    for (let i = 0; i < size; i++) {
      const worker = new Worker(workerUrl, { type: 'module' });
      this.pool.push({ worker, busy: false });
    }
  }

  async exec(data) {
    const available = this.pool.find(w => !w.busy);
    if (!available) throw new Error('No workers available');
    
    available.busy = true;
    return new Promise((resolve) => {
      available.worker.onmessage = (e) => {
        available.busy = false;
        resolve(e.data);
      };
      available.worker.postMessage(data);
    });
  }
}

2. Transferable Objects: Use transfer to improve large data transfer efficiency

// Main thread
const buffer = new ArrayBuffer(1024 * 1024 * 10); // 10MB data
worker.postMessage({ buffer }, [buffer]); // Transfer ownership

// Worker side
self.onmessage = (e) => {
  const buffer = e.data.buffer;
  // Process buffer...
};

Type-Safe Workers

Ensure type safety in Worker communication with TypeScript:

// worker-types.ts
export interface WorkerAPI {
  calculate(data: number): Promise<number>;
  processImage(data: ImageData): Promise<ImageData>;
}

// Main thread
const worker = new Worker(new URL('./typed-worker.ts', import.meta.url));
const api = Comlink.wrap<WorkerAPI>(worker);
const result = await api.calculate(42); // Type checking

Debugging Tips

1. Debug Workers in Chrome DevTools via chrome://inspect
2. Use sourcemaps to map to original code:

// vite.config.js
export default {
  worker: {
    sourcemap: true
  }
};

3. Use console.log in Workers:

// worker.js
self.onmessage = (e) => {
  console.log('Worker received:', e.data);
  // ...
};

Common Issue Solutions

Issue 1: DOM access in Workers

Solution: Keep DOM operations in the main thread, Workers handle pure computation:

// Main thread gets DOM data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
worker.postMessage({ imageData });

// Worker processes data and returns result
self.onmessage = (e) => {
  const processed = processImage(e.data.imageData);
  self.postMessage({ processed });
};

Issue 2: CORS restrictions

Solution: Ensure Worker scripts are same-origin or configure correct CORS headers:

// Dev server configuration
export default {
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin'
    }
  }
};

Issue 3: Legacy browser compatibility

Solution: Use dynamic loading and feature detection:

if (window.Worker) {
  // Use Web Worker
} else {
  // Fallback solution
  import('./main-thread-fallback.js').then(module => {
    module.runHeavyTask();
  });
}

Practical Application Examples

Image Processing Application:

// Main thread
const imageWorker = new Worker(new URL('./image-processor.js', import.meta.url));

async function processImage(file) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  return new Promise((resolve) => {
    imageWorker.onmessage = (e) => {
      ctx.putImageData(e.data, 0, 0);
      resolve(canvas.toDataURL());
    };
    imageWorker.postMessage(imageData, [imageData.data.buffer]);
  });
}

Real-time Data Analysis:

// Data analysis Worker
self.onmessage = (e) => {
  const data = e.data;
  const results = {
    average: calculateAverage(data),
    trend: analyzeTrend(data),
    anomalies: detectAnomalies(data)
  };
  self.postMessage(results);
};

function calculateAverage(data) {
  return data.reduce((sum, val) => sum + val, 0) / data.length;
}