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

我用以下的代码去生成远程图片的模糊化图片,当图片数量比较小的时候可以正常处理,但是我现在有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);
77 views
Comments
登录后评论
Sign In
·

你调用getPhotos()的地方await了吗,想不到其他原因了