vite-plugin-imagemin 图像压缩插件使用指南

vite-plugin-imagemin 图像压缩插件使用指南

【免费下载链接】vite-plugin-imagemin A vite plugin for compressing image assets. 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-imagemin

vite-plugin-imagemin 是一个专为 Vite 构建过程设计的插件，能够自动压缩项目中的图像资产，帮助提高网页加载速度和减少带宽消耗。它利用了 imagemin 库来高效地减小图片文件大小，支持多种图片格式，是优化前端资源的理想工具。

安装方法

环境要求

• Node.js 版本 >= 12.0.0
• Vite 版本 >= 2.0.0

安装命令

使用 npm 安装：

npm i vite-plugin-imagemin -D

使用 yarn 安装：

yarn add vite-plugin-imagemin -D

中国用户安装注意事项

由于 imagemin 在中国安装可能存在困难，提供以下解决方案：

1. 使用 yarn 在 package.json 内配置（推荐）

"resolutions": {
  "bin-wrapper": "npm:bin-wrapper-china"
}

2. 使用 npm，在电脑 host 文件添加如下配置：

199.232.4.133 raw.githubusercontent.com

3. 使用 cnpm 安装（不推荐）

基本配置

在 vite.config.ts 中配置插件：

import viteImagemin from 'vite-plugin-imagemin'

export default () => {
  return {
    plugins: [
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        mozjpeg: {
          quality: 20,
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox',
            },
            {
              name: 'removeEmptyAttrs',
              active: false,
            },
          ],
        },
      }),
    ],
  }
}

配置参数说明

参数	类型	默认值	说明
verbose	boolean	true	是否在控制台输出压缩结果
filter	RegExp or (file: string) => boolean	-	指定哪些资源不压缩
disable	boolean	false	是否禁用
svgo	object or false	-	SVG 压缩配置
gifsicle	object or false	-	GIF 压缩配置
mozjpeg	object or false	-	JPEG 压缩配置
optipng	object or false	-	PNG 压缩配置
pngquant	object or false	-	PNG 压缩配置
webp	object or false	-	WebP 压缩配置

使用示例

运行示例项目

项目中包含了一个完整的示例项目，可以通过以下命令运行：

npm run dev:play
npm run dev:build

图片资源示例

项目提供了多种格式的图片资源用于测试：

• 静态测试图片：packages/playground/basic/public/images/static-test.png
• 动态测试图片：packages/playground/basic/src/assets/test.gif
• 矢量图形：packages/playground/basic/src/assets/test.svg

高级配置技巧

精准压缩设置

根据项目需求定制压缩参数，实现更好的压缩效果：

imagemin({
  gifsicle: { optimizationLevel: 3 },
  mozjpeg: { quality: 80 },
  pngquant: { quality: [0.6, 0.8] },
  svgo: {
    plugins: [
      { removeViewBox: false },
      { removeEmptyAttrs: false }
    ]
  }
})

性能优化最佳实践

• 智能格式选择：根据使用场景选择最佳图片格式
• 渐进式加载：结合懒加载技术提升用户体验
• 多设备适配：为不同屏幕尺寸优化图片分辨率

项目结构

项目采用 monorepo 结构，包含核心插件和示例项目：

• 核心插件：packages/core/
• 示例项目：packages/playground/basic/
• 类型定义：packages/core/src/types.ts

许可证

本项目采用 MIT 许可证，详情请查看 LICENSE 文件。

通过本指南，你将掌握使用 vite-plugin-imagemin 优化项目图片资源的完整流程，立即开始提升你的网站性能吧！

【免费下载链接】vite-plugin-imagemin A vite plugin for compressing image assets. 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-imagemin