本地生成文件的运行原理是什么？如何在Node.js服务端与客户端实现该功能？

运行原理 #

你看到的弱网下高速下载大文件的效果，核心逻辑是没有通过网络传输大文件本体，所有文件内容完全在用户客户端（浏览器）本地生成，服务端仅需传输KB级别的生成规则代码，几乎不占用带宽，下载速度只取决于客户端的CPU运算速度和磁盘写入速度。
这类方案仅适用于内容可通过固定规则生成的文件：

• 类似你提到的测试文件，就是规则化的固定字节填充/伪随机序列生成，不需要提前存储大文件，也不需要传输
• Google Drive的快速下载是另一种本地生成逻辑：如果文件已经在本地浏览器缓存、或者是用户刚上传/编辑过的本地已有副本，下载时直接读取本地缓存生成下载文件，不需要重新从服务器拉取
  你之前排除的两种可能确实成立：既不是压缩效果，也不可能硬编码在HTML中，因为整个方案本质是「传输生成算法，本地计算数据」，算法体积极小，不存在大体积内容传输的问题。

实现方案 #

适用边界 #

首先要明确：该方案仅适用于规则可生成的文件（测试文件、模板导出文件、客户端本地已有数据拼接的文件等），如果是用户上传的独有、无规则的自定义资源，无法用该方案实现，还是需要走CDN分发的常规下载逻辑。

Node.js 服务端实现 #

服务端不需要处理大文件的IO和传输，仅需要做两件事：

1. 托管包含文件生成逻辑的前端静态页面/JS代码

const express = require('express');
const app = express();
// 托管存放前端逻辑的静态目录
app.use(express.static('./public'));
app.listen(3000, () => {
  console.log('服务启动完成，端口3000');
});

2. （可选）提供轻量接口，根据用户请求返回对应的生成参数（参数体积仅几十字节，完全不占用带宽）

app.get('/gen-config', (req, res) => {
  // 从请求参数中取用户需要的文件大小、类型
  const { size = '1', type = 'null' } = req.query;
  res.json({
    // 转换为字节单位的文件大小
    totalSize: Number(size) * 1024 * 1024 * 1024,
    // 填充字节，null代表生成随机内容
    fill: type === 'random' ? null : 0x00,
    fileName: `test-${size}G.bin`
  });
});

客户端实现 #

前端拿到生成参数后，流式生成文件并触发下载即可，大文件分块生成避免内存溢出：

// 调用服务端接口获取生成参数，也可以直接把参数写死在前端
async function getConfigAndDownload(fileSize) {
  const config = await fetch(`/gen-config?size=${fileSize}`).then(res => res.json());
  generateAndDownload(config);
}

// 本地生成文件并触发下载
async function generateAndDownload(config) {
  const { totalSize, fill, fileName } = config;
  // 每次生成1MB的块，避免占满设备内存
  const CHUNK_SIZE = 1024 * 1024;
  const chunks = [];
  let remainingSize = totalSize;

  while (remainingSize > 0) {
    const currentChunkSize = Math.min(CHUNK_SIZE, remainingSize);
    let chunk;
    if (fill !== null) {
      // 填充固定字节
      chunk = new Uint8Array(currentChunkSize).fill(fill);
    } else {
      // 生成随机内容
      chunk = crypto.getRandomValues(new Uint8Array(currentChunkSize));
    }
    chunks.push(chunk);
    remainingSize -= currentChunkSize;
  }

  // 生成Blob并触发浏览器下载
  const fileBlob = new Blob(chunks);
  const downloadUrl = URL.createObjectURL(fileBlob);
  const aTag = document.createElement('a');
  aTag.href = downloadUrl;
  aTag.download = fileName;
  aTag.click();
  // 释放内存
  URL.revokeObjectURL(downloadUrl);
}

内容的提问来源于stack exchange，提问作者user13152486