如何在Amplify Datastore中实现Bulk Insert，解决批量插入卡顿崩溃问题

现有实现是串行执行25000次异步保存操作，每一次操作都要等待上一次完成才会发起，除了耗时极长之外，大量异步任务堆积、持续的IO操作也会占用大量浏览器内存，最终导致崩溃。你可以选择以下两种方案解决：

方案1：使用Datastore原生批量保存接口（推荐） #

最新版本的AWS Amplify Datastore已经提供了batchSave方法，支持一次性传入多条模型实例完成批量插入，内部已经做了性能优化，不需要自己处理并发逻辑，直接调用即可：

const savePosts = async (posts) => {
  try {
    // 先把所有post转为Post模型实例
    const postInstances = posts.map(post => new Post(post));
    // 批量保存
    await DataStore.batchSave(postInstances);
  } catch (err) {
    console.error('批量保存失败', err);
  }
};

注意：如果你的Amplify版本低于v5，没有内置batchSave方法，请使用方案2

方案2：分片并发实现批量插入（兼容低版本） #

如果用的旧版本不支持批量接口，可以通过「分片+控制并发数」的方式优化，既避免串行的慢，也避免全量并发导致的浏览器请求溢出：

const savePosts = async (posts, chunkSize = 50, concurrency = 10) => {
  // 先把所有数据分片，每片chunkSize条
  const chunks = [];
  for (let i = 0; i < posts.length; i += chunkSize) {
    chunks.push(posts.slice(i, i + chunkSize));
  }

  for (const chunk of chunks) {
    // 每片内最多同时发起concurrency个保存请求
    const promises = chunk.map(async (post) => {
      try {
        return await DataStore.save(new Post(post));
      } catch (err) {
        console.error('单条保存失败', err);
        return null;
      }
    });
    // 等待当前分片所有请求完成再处理下一片，避免内存溢出
    await Promise.all(promises);
  }
};

你可以根据自己的设备性能调整参数：

• 普通桌面端建议分片大小50-100，并发数5-10即可，移动端可以适当调小
• 该方案相比原串行实现，性能可以提升5-10倍，同时不会出现浏览器崩溃的问题

额外优化建议 #

• 如果25000条数据不需要即时在前端展示，可以把保存逻辑放到Web Worker里执行，避免阻塞主线程导致页面卡顿
• 插入前可以先做数据去重，减少不必要的保存请求

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