帮我写个vite插件用来压缩图片
时间: 2023-08-11 07:08:39 浏览: 163
从Vite压缩您的捆绑包和资产-Vue.js开发
好的,以下是一个使用 `imagemin` 库来压缩图片的 Vite 插件:
```js
const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');
const imageminMozjpeg = require('imagemin-mozjpeg');
function imageminPlugin(options = {}) {
const { quality = 0.8 } = options;
return {
name: 'imagemin',
async transform(_, id) {
if (/\.(png|jpe?g)$/i.test(id)) {
const buffer = await this.load(id);
const plugins = [
imageminPngquant({ quality: [quality, quality] }),
imageminMozjpeg({ quality: quality * 100 }),
];
const optimized = await imagemin.buffer(buffer, { plugins });
return {
code: `export default ${JSON.stringify(optimized.toString('base64'))}`,
};
}
},
};
}
module.exports = imageminPlugin;
```
使用方法:
1. 安装依赖:
```
npm install imagemin imagemin-pngquant imagemin-mozjpeg --save-dev
```
2. 在 `vite.config.js` 中使用:
```js
import imageminPlugin from './plugins/imagemin.js';
export default {
plugins: [
imageminPlugin({
quality: 0.8, // 图片压缩质量,范围是 0 到 1
}),
],
};
```
这样,在构建项目时,所有的图片文件都会被压缩。压缩后的图片会被转换成 Base64 字符串并作为模块的默认导出。注意,这种方式可能会增加构建后文件的体积,因此需要根据实际情况进行选择。
阅读全文