importScripts

在 worker 中可以使用 importScripts 將外部的套件引入進來，這樣會將 script 裡的變數都以全域的方式匯入

以下範例引入 lodash 的 CDN 後，就可以直接呼叫 _ 使用 lodash 的方法

importScripts('https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js');

// 使用 lodash 內建的 add 方法
const result = _.add(1, 2);
self.postMessage(result); // 3

避免不同 scripts 間的變數衝突

有個小地方需要注意的是，因為 importScripts 會將 script 中的變數都提升成全域變數，所以當不同 script 間有相同的變數名稱時，會丟出錯誤

// add.js
const calculate = (num1, num2) => num1 + num2;
// multiply.js
const calculate = (num1, num2) => num1 * num2;

// 由於兩個檔案都有 calculate 函式，會丟出 SyntaxError 錯誤
self.importScripts("./add.js", "./multiply.js");

以模組方式匯入

因為使用 importScripts 有變數衝突的隱憂，所以在 Chrome 80 後新增了 module worker，可以將 scripts 以模組的方式匯入避免變數衝突，使用方式是在創建 worker 線程的時候加入 {type: 'module'}

P.S. Safari 15(2021/09) 跟 Firefox 114(2023/06) 以上都支援此用法，目前有 90% 瀏覽器支援，看來已經算是標準了

主線程

const worker = new Worker('./worker.js', {
  type: 'module'
});

worker 線程

import { calculate as add } from './add.mjs';
import { calculate as multiply } from './multiply.mjs';

const addResult = add(1, 2);
const multiplyResult = multiply(1, 2);

範例程式碼請參照 Demo

Reference

Threading the web with module workers