简介
要给大家介绍的是这款 vite-plugin-image-optimizer
- 核心是使用 Sharp.js 和 SVGO 来优化图像资源
安装
arduino
pnpm add -D vite-plugin-image-optimizer
注意点:
sharp
和svgo
不作为软件包的一部分安装,必须手动安装它们并将其添加为开发依赖项- 这是一个设计决策,因为如果你只想使用
svgo
优化 svg 资源,则可以选择跳过安装sharp
,反之亦然
csharp
pnpm add -D sharp
pnpm add -D svgo
基础使用
详细使用可进入 github 文档进行阅读
javascript
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import { defineConfig } from 'vite';
export default defineConfig(() => {
return {
plugins: [
ViteImageOptimizer({
/* pass your config */
}),
],
};
});
核心逻辑
如何在打包过程中获取项目中使用到的图片
generateBundle 钩子
在这个钩子你可以获取即将要写入磁盘的打包产物,在写入磁盘前对其进行修改
javascript
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
{
name: 'my-plugin',
generateBundle(options, bundle) {
for (const fileName in bundle) {
const asset = bundle[fileName];
if (asset.type === 'asset') {
// 对静态资源进行处理
console.log(`Asset: ${fileName}`);
} else if (asset.type === 'chunk') {
// 对代码块进行处理
console.log(`Chunk: ${fileName}`);
}
}
}
}
]
});
asset 长啥样
type === asset
通常指代码外的资源,包含图片、字体、css 文件等,因为我们要处理的是图片,下面展示了图片对应的输出
yaml
{
fileName: 'assets/6-DKYr8hna.jpg',
name: '6.jpg',
needsCodeReference: false,
source: <Buffer ff d8 ... 9683 more bytes>,
type: 'asset'
}
思路
有了前面的铺垫,后续逻辑就清晰了
- generateBundle 钩子中拿到打包产物
- 根据
type === asset
以及文件名所对应的后缀判断是否是图片资源 - 对图片资源的 source 进行压缩,使用 sharp 或者其他
- 压缩后反写入 source 属性
- 压缩完成,等待产物生成
ini
// 简化后的示意代码
generateBundle: async (_, bundle) => {
const keys = Object.keys(bundle)
const imageRegex = /\.(?:jpg|jpeg|png|gif|bmp|webp)$/i
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
const item = bundle[key]
if (item.type === 'asset' && imageRegex.test(item.name)) {
const source = (bundle[key] as any).source;
const content = await compressImg(source);
(bundle[key] as any).source = content;
}
}
}
源码解析
该插件除了最基础的图片压缩外,还加入了其他功能
- 压缩产物缓存
- public 下图片处理
- ...
感兴趣的可移步源码,or 本人解析版本