我在next.js中使用plaiceholder这个插件去模糊化图片的时候，当图片数量比较多的时候为什么会卡住？

Question

I use the following code to blur the remote images, when the number of images is small it can be executed, but now I have 50 images and the browser gets stuck after the project runs.

what is the best way to optimize it? Is it caused by the plaiceholder plugin or by nextjs itself?

我用以下的代码去生成远程图片的模糊化图片，当图片数量比较小的时候可以正常处理，但是我现在有50张图片，这个方法就运行不出结果了，程序会卡死

有什么办法优化这段代码吗？这是因为plaiceholder这个插件造成的，还是nextjs自己的问题？

import fs from 'fs';
import path from 'path';
import { getPlaiceholder } from 'plaiceholder';
import { PhotoData } from '../types';

const directory = path.join(process.cwd(), 'data');

export async function getPhotos() {
  const filePath = path.join(directory, 'photos.json');
  const jsonData = fs.readFileSync(filePath, 'utf8');
  const photosData = JSON.parse(jsonData).sort((a: PhotoData, b: PhotoData) =>
    new Date(b.date) > new Date(a.date) ? 1 : -1
  );

  const photosProps = await Promise.all(
    photosData.map(async (photoData: PhotoData) => {
      const { thumbnail } = photoData;
      const { base64, img } = await getPlaiceholder(thumbnail);

      return {
        ...img,
        blurDataURL: base64,
      };
    })
  ).then((values) => values);

  return {
    photosProps,
    photosData,
  };
}

Answer 1

一般 base 64 格式的文件比较大
可以试试stragety 是 svg 或css ，或设置一下size 大小

Answer 2

我们不能把太多的东西放在内存中，这会引发问题，甚至影响物理服务器的性能。让模糊处理自行存储文件，然后返回地址即可。或者避免promise all或让前端发起promise all而不是后端。