minify - 有人可以引导我了解如何在我的 React 应用程序 (firebase) 中使用 imagemin-webp 吗？

Question

我想将所有图像转换为 webp，但我不知道如何(编程菜鸟)。我构建了一个 react 应用程序，我有一个 firebase.json，我的 package.json 中有脚本“build”:“react-app-rewired build”。

我在哪里放置代码以及如何连接它们？提前致谢。

Answer 1

如果你熟悉 nodejs 你可以使用 imagemin-webp
https://www.npmjs.com/package/imagemin-webp

npm i imagemin
npm i imagemin-webp

然后使用这个脚本:

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*.{jpg,png}'], { //input here
  destination: __dirname + '/images/converted/', //output here
  plugins: [
    imageminWebp({
      quality: 75, //quality
      resize: { //optional resizing
        width: 1000, 
        height: 0 //if one of the parameters is 0 it scales automatically 
      }
    })
  ]
}).then(() => {
  console.log('Images optimized');
});