如何在Next.js 14 App Router中正确使用Comlink Worker？

1. 安装依赖 #

首先安装Comlink包：

npm install comlink
# 或使用yarn
yarn add comlink
# 或pnpm
pnpm add comlink

2. 创建Worker文件 #

在app目录下新建workers文件夹，创建calculator.worker.js（文件名可自定义），编写Worker逻辑并通过Comlink暴露方法：

import * as Comlink from 'comlink';

// 定义Worker要提供的功能
const calculator = {
  // 简单加法
  add(a, b) {
    return a + b;
  },
  // 计算斐波那契数（模拟耗时任务）
  fibonacci(n) {
    if (n <= 1) return n;
    return this.fibonacci(n - 1) + this.fibonacci(n - 2);
  },
};

// 暴露该对象给主线程
Comlink.expose(calculator);

3. 在客户端组件中使用Worker #

由于Worker属于浏览器API，只能在客户端组件中使用，需要添加'use client'指令。以app/page.js为例：

'use client';

import * as Comlink from 'comlink';
import { useEffect, useState, useRef } from 'react';

export default function Home() {
  const [addResult, setAddResult] = useState(null);
  const [fibResult, setFibResult] = useState(null);
  const workerRef = useRef(null);

  useEffect(() => {
    async function initWorker() {
      // 创建Worker实例并通过Comlink包装
      const workerInstance = new Worker('../workers/calculator.worker.js');
      const calculator = Comlink.wrap(workerInstance);
      workerRef.current = calculator;

      // 调用Worker中的方法
      const sum = await calculator.add(12, 24);
      setAddResult(sum);

      const fib = await calculator.fibonacci(30);
      setFibResult(fib);
    }

    initWorker();

    // 组件卸载时释放Worker资源，避免内存泄漏
    return () => {
      if (workerRef.current) {
        workerRef.current[Comlink.releaseProxy]();
      }
    };
  }, []);

  return (
    <main className="p-8 space-y-4">
      <h1 className="text-2xl font-bold">Comlink Worker Demo</h1>
      <p>12 + 24 = {addResult}</p>
      <p>Fibonacci(30) = {fibResult}</p>
    </main>
  );
}

关键注意事项 #

• 客户端组件限制：必须添加'use client'指令，Server Components无法访问浏览器的Worker API。
• 资源清理：组件卸载时务必调用Comlink.releaseProxy()释放Worker，防止内存泄漏。
• 路径问题：Worker文件的相对路径需确保正确，Next.js会自动处理Worker的打包和资源加载。

内容的提问来源于stack exchange，提问作者Mutasim Al-Mualimi