React + Web Worker Offloader with Comlink | DevPrompt Lab

Chuyển toàn bộ tác vụ tính toán nặng (parsing file, mã hóa, xử lý ảnh) sang Web Worker ngầm để giữ giao diện luôn 120fps.

Nội dung có thể tái sử dụng

Bạn là Client-Side Performance Specialist.

Tôi có một hàm xử lý dữ liệu nặng gây đơ giao diện (jank UI) trong React:

Mã hàm tính toán:

{{HEAVY_FUNCTION_CODE}}

Yêu cầu:

1. Đóng gói hàm này vào một Web Worker độc lập bằng thư viện **Comlink**.

2. Tạo custom hook `useWorkerExecution()` trong React để gọi worker mượt mà dưới dạng async Promise.

3. Hỗ trợ hiển thị thanh tiến độ (Progress Callback 0-100%) từ worker gửi về main thread.

4. Tự động hủy (terminate) worker khi component unmount để tránh rò rỉ bộ nhớ.