Next.js应用批量下载50+灾害地图HTML文件崩溃问题求助

你的核心问题是前端批量处理大量大体积HTML文件时，内存占用超出浏览器限制导致崩溃。以下是针对你的疑问和场景的具体解决思路：

1. 关于HTML压缩的效果 #

压缩（Minify）确实能有效减小文件体积：

• 对于包含大量GeoJSON和空白字符的HTML，通过移除注释、空白、压缩变量名，通常能节省30%-60%的空间——比如10MB的文件可压缩到4-7MB。
• 但这只是缓解手段，无法从根本解决50+文件的内存过载问题，因为浏览器仍需在内存中处理所有压缩后的文件并打包成Zip。

2. 核心问题根源 #

• 前端循环发起50+并发请求，同时在内存中存储所有10MB级的HTML字符串，加上Zip打包时的额外内存开销，直接超出浏览器的内存上限。
• 单个HTML内嵌了完整的Leaflet脚本和重复的地理数据（如海岸线、断层线），进一步放大了体积和内存压力。

3. 具体解决思路 #

思路一：后端接管批量打包（最优方案） #

把生成HTML、压缩、打包Zip的逻辑全部移到Next.js后端，前端仅触发任务并下载成品Zip，将内存压力转移到服务器：

• 实现步骤：
  1. 创建新的API路由（如/api/batch-download），接收Excel解析后的地址列表和共享地理数据。
  2. 使用Node.js的archiver库批量生成HTML、压缩并打包成Zip，通过流的方式返回给前端（避免服务器内存过载）。
  3. 前端只需发起一次请求，直接下载生成好的Zip文件。

示例后端代码：

// app/api/batch-download/route.ts
import { NextResponse } from 'next/server';
import archiver from 'archiver';
import { minify } from 'html-minifier-terser';
import { leafletTemplate } from '@/utils/leaflet-template';

export async function POST(request: NextRequest) {
  const { fileContent, coastlines, faultLines, snowfall, snowfallAreas, volcanoes, leaflet } = await request.json();

  // 创建Zip流，启用最高压缩级别
  const archive = archiver('zip', { zlib: { level: 9 } });
  const response = new NextResponse(archive, {
    headers: {
      'Content-Type': 'application/zip',
      'Content-Disposition': `attachment; filename="${fileContent[0]?.filename}_result.zip"`,
    },
  });

  archive.on('error', (err) => {
    throw new Error(err.message);
  });

  // 批量生成并压缩HTML
  for (const fileItem of fileContent) {
    const leafletData = leaflet.find(item => item[fileItem.addr]);
    const coords = { lat: fileItem.lat, lng: fileItem.lng };
    const { type, features } = leafletData[fileItem.addr];

    // 生成HTML模板
    let html = leafletTemplate(
      fileItem.addr,
      coords,
      coastlines,
      faultLines,
      snowfall,
      snowfallAreas,
      volcanoes,
      { type, features },
      leafletData[fileItem.addr]
    );

    // 压缩HTML
    html = await minify(html, {
      collapseWhitespace: true,
      removeComments: true,
      minifyJS: true,
      minifyCSS: true
    });

    // 添加到Zip
    archive.append(html, { name: `${fileItem.id}_${fileItem.addr}.html` });
  }

  archive.finalize();
  return response;
}

思路二：前端优化并发与内存管理 #

如果暂时无法迁移到后端，可通过分批处理降低内存压力：

• 限制并发请求数（如一次处理5-10个地址），避免同时加载大量数据。
• 每处理完一批就将HTML写入Zip，不缓存所有未处理的数据。

示例前端代码：

// 分批处理函数
async function processBatch(items) {
  const promises = items.map(async (fileItem) => {
    const leafletData = leaflet.find(item => item[fileItem.addr]);
    const coords = { lat: fileItem.lat, lng: fileItem.lng };
    const { type, features } = leafletData[fileItem.addr];

    const response = await fetch("/leaflet/api", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        address: fileItem.addr,
        coords,
        coastlines,
        faultLines,
        snowfall,
        snowfallAreas,
        volcanoes,
        geoJson: { type, features },
        tileLayers: leafletData[fileItem.addr],
      }),
    });

    const { template } = await response.json();
    return { name: `${fileItem.id}_${fileItem.addr}.html`, content: template };
  });

  return Promise.all(promises);
}

// 主逻辑：分批处理
const batchSize = 5;
const batches = [];
for (let i = 0; i < selectedFile.fileContent.length; i += batchSize) {
  batches.push(selectedFile.fileContent.slice(i, i + batchSize));
}

const zip = new JSZip();
for (const batch of batches) {
  const results = await processBatch(batch);
  results.forEach(({ name, content }) => {
    zip.file(name, content);
  });
}

// 生成并下载Zip
zip.generateAsync({ type: "blob" }).then((content) => {
  const url = URL.createObjectURL(content);
  const a = document.createElement("a");
  a.href = url;
  a.download = `${selectedFile.filename}_result.zip`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

思路三：大幅减小单个HTML体积 #

• 移除内嵌的Leaflet依赖：将Leaflet的CSS/JS改为引用CDN链接，每个HTML可减少几百KB到1MB的体积。
• 提取共享地理数据：将coastlines、faultLines等全局数据单独存为一个JSON文件放入Zip，每个HTML通过相对路径引用，避免重复内嵌。
• 简化GeoJSON：使用Turf.js的simplify方法减少GeoJSON的坐标点数量，或用pako库压缩GeoJSON后内嵌，前端HTML加载时再解压。

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