如何基于字符串创建SharedWorker且无需上传脚本至服务器，同时支持其他页面复用相同Worker URL？

嘿，这个问题确实戳中了SharedWorker和Blob URL的痛点——Blob URL的生命周期和创建它的窗口绑定，而且每个窗口生成的URL还不一样，根本没法跨页面复用。Base64的大小限制也确实烦人，但咱们还是有办法绕过去的，下面给你说个可行的方案：

核心思路：预压缩脚本+可复现的Data URL #

既然直接用大字符串生成的Data URL会超长度，那咱们先把你的大JS脚本“瘦个身”，再转成可复用的Data URL，这样所有页面都能生成完全一样的Worker URL，自然就能共享同一个SharedWorker了。

具体步骤分两步：预处理脚本和页面端生成Worker

1. 预处理你的大JS脚本（离线做，别放运行时）

这一步是关键，得提前把你的脚本压缩到足够小：

• 先做代码压缩：用Terser、UglifyJS这类工具把你的脚本里的空格、注释、冗余代码删掉，能省不少体积
• 再做gzip压缩：把压缩后的脚本用gzip算法压缩（比如用Node.js的zlib模块，或者在线工具），然后把压缩后的二进制数据转成Base64字符串
• 把这个最终的Base64字符串存到你的库里，作为固定常量

2. 页面端生成可复用的SharedWorker URL

在每个需要使用SharedWorker的页面里，你可以这样写：

// 这是你预处理好的压缩脚本Base64（固定不变的）
const COMPRESSED_SCRIPT_BASE64 = '这里填你预先生成的Base64字符串';

// 构造Worker的核心代码：先解压，再执行你的脚本
const workerBootstrapCode = `
// 这里放轻量的gzip解压逻辑（比如用pako的minified版本，尽量精简）
function inflate(data) {
  // 示例用pako的精简解压实现，实际建议用成熟轻量库
  const inflator = new Zlib.Gunzip(data);
  return inflator.decompress();
}

// 解码Base64并解压脚本
const scriptBytes = atob('${COMPRESSED_SCRIPT_BASE64}');
const uint8Array = new Uint8Array(scriptBytes.length);
for (let i = 0; i < scriptBytes.length; i++) {
  uint8Array[i] = scriptBytes.charCodeAt(i);
}
const decompressedScript = inflate(uint8Array);

// 执行解压后的脚本
eval(new TextDecoder('utf-8').decode(decompressedScript));
`;

// 生成统一的Data URL：所有页面用这段代码生成的URL完全一致
const sharedWorkerUrl = `data:application/javascript;charset=utf-8,${encodeURIComponent(workerBootstrapCode)}`;

// 创建SharedWorker，所有页面用这个URL就能共享同一个Worker实例了
const worker = new SharedWorker(sharedWorkerUrl);

为什么这个方案可行？ #

• 所有页面用的sharedWorkerUrl是完全相同的：因为COMPRESSED_SCRIPT_BASE64是固定的，workerBootstrapCode也是固定的，所以生成的Data URL完全一致，浏览器会把它当成同一个Worker资源，从而复用SharedWorker实例
• 解决了Base64大小限制：经过代码压缩+gzip压缩后，哪怕是几MB的原始脚本，压缩后体积能降到原来的1/3甚至更小，完全在浏览器Data URL的长度限制内（主流浏览器一般支持几MB的Data URL）

注意事项 #

• 解压代码要尽量精简：别把整个pako库都塞进去，用它的minified版本甚至只提取解压相关的代码，避免增加额外体积
• 预处理一定要离线做：别在页面运行时压缩脚本，那会严重影响性能，预处理好的Base64直接存到库里就行
• 浏览器兼容性：现在Chrome、Firefox、Edge这些主流浏览器都支持Data URL作为SharedWorker的脚本源，不用担心兼容问题

如果你的脚本实在大到压缩后还是超Data URL限制，那可能得考虑其他方案，比如把脚本拆成多个小模块，用importScripts在Worker里加载，但那可能就需要把模块放到服务器上了——不过一般来说，压缩后的脚本都能搞定。

备注：内容来源于stack exchange，提问作者Maz