如何把一个10M的外部js文件分割为多个不到100k的文件？

解答思路

不需要真的把文件“分割”成多个独立文件，只要目标服务器（或 CDN）支持 HTTP Range 请求，就可以直接用 fetch 携带 Range 请求头，一次请求一个字节区间，从而实现“按需分片获取”的效果，等价于把文件按范围切成了多份。

示例代码

async function fetchRange(url, start, end) {
  const res = await fetch(url, {
    headers: {
      Range: `bytes=${start}-${end}`,
    },
  });
  return res.arrayBuffer();
}

// 依次获取多个片段
const chunk1 = await fetchRange(url, 0, 102399);      // 前 100KB
const chunk2 = await fetchRange(url, 102400, 204799);  // 第 2 个 100KB

如果需要查看片段内容的二进制表示，可以用 DataView 逐字节读取：

function show(arrayBuffer) {
  const dataView = new DataView(arrayBuffer);
  let str = '';
  for (let i = 0; i < dataView.byteLength; i++) {
    if (i % 8 === 0) str += '\n';
    str += dataView.getUint8(i).toString(2).padStart(8, '0') + ',';
  }
  console.log(str);
  return arrayBuffer;
}

详细说明

• 前提条件：目标资源所在的服务器/CDN 必须支持 Range 请求（响应头会有 Accept-Ranges: bytes，状态码通常是 206 Partial Content）。常见的静态资源 CDN（如 jsDelivr）大多支持。
• Range: bytes=start-end 是闭区间，两端都包含在内，注意计算偏移量时不要出现重叠或遗漏字节。
• 分片获取到的 ArrayBuffer 只是原始二进制数据，如果最终目的是执行这段 JS，需要把各个分片按顺序拼接（可以用 Blob 或 Uint8Array 合并）还原成完整文件后再使用，单独一个分片本身通常不是可执行的合法 JS。
• 可以通过对比「分片拼接后的结果」与「直接整段 Range 请求」的结果是否一致，来验证分片逻辑是否正确。

小结

不需要在源头真正拆分文件，只要服务端支持 Range 请求，用 fetch + Range 请求头即可按字节区间分片获取远程 JS 文件；获取到的分片需要按序拼接后才能得到可用的完整文件。