JavaScript Vite 构建中怎么配置图片资源的压缩与格式转换-js教程-PHP中文网

Vite图片压缩与格式转换推荐使用vite-plugin-image-optimizer（Windows/跨平台首选），基于@squoosh/lib纯JS实现，支持PNG/JPEG/GIF压缩及自动转WebP/AVIF；或选vite-plugin-imagemin深度调优压缩算法，但需处理二进制依赖问题。

javascript vite 构建中怎么配置图片资源的压缩与格式转换

在 Vite 构建中配置图片压缩与格式转换，核心是选用合适插件并正确设置参数。目前主流方案有两类：一类专注压缩（如 vite-plugin-imagemin），另一类兼顾压缩+现代格式自动转码（如 vite-plugin-image-optimizer）。推荐根据项目环境和目标选择——Windows 开发者优先用后者，避免底层二进制依赖问题；需要精细控制压缩算法的团队可选前者。

使用 vite-plugin-image-optimizer（推荐 Windows / 跨平台）

该插件基于纯 JS 的 @squoosh/lib，无需安装 cwebp、mozjpeg 等本地工具，开箱即用，同时支持 WebP/AVIF 自动转换。

安装：npm install vite-plugin-image-optimizer -D

在 vite.config.js 中添加插件：

import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'

export default defineConfig({
  plugins: [
    ViteImageOptimizer({
      png: { quality: 80 },
      jpeg: { quality: 80 },
      webp: { quality: 80, lossless: false },
      avif: { quality: 75 },
      include: /\.(png|jpe?g|gif|svg)$/i,
      exclude: /node_modules/
    })
  ]
})

构建后，原始图片保留，同时生成同名 .webp 或 .avif 文件，需配合 HTML/CSS 中按条件加载（例如用标签）

使用 vite-plugin-imagemin（适合深度调优）

底层基于 imagemin 生态，支持更细粒度算法控制（如 pngquant、gifsicle），但国内安装常遇网络问题，需提前处理。

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

安装前建议在 package.json 加 resolutions 防止卡住：

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

安装：yarn add vite-plugin-imagemin -D

基础配置示例：

import viteImagemin from 'vite-plugin-imagemin'

viteImagemin({
  gifsicle: { optimizationLevel: 7 },
  optipng: { optimizationLevel: 7 },
  mozjpeg: { quality: 80 },
  pngquant: { quality: [0.8, 0.9], speed: 4 },
  svgo: {
    plugins: [
      { name: 'removeViewBox' },
      { name: 'removeEmptyAttrs', active: false }
    ]
  }
})

注意：它只压缩原图，不生成新格式文件；如需 WebP，得额外配转码逻辑或换用其他插件

手动实现 WebP 双格式输出（轻量定制场景）

若只需 WebP 备份、不依赖第三方插件，可写简易插件在 generateBundle 钩子中复制图片 chunk 并转码：

读取原始图片 buffer
用 @squoosh/cli 或 sharp（需 Node 16+）转为 WebP buffer
构造新 chunk，修改 fileName（如 icon.png → icon.webp）并注入 bundle
最终输出目录会同时存在 icon.png 和 icon.webp

开发环境图片内联阈值调整（避坑关键）

Vite 默认把 ≤4KB 图片在开发时转为 base64，但生产构建才走 assetsInlineLimit。若需开发时也保持文件形式（便于调试懒加载、CDN 等），不能只改 build.assetsInlineLimit。

必须自定义插件拦截 transform 钩子，对 .png/.jpg 等资源跳过 base64 编码
或临时设 build.assetsInlineLimit: 0（慎用，可能影响 HMR 性能）
更稳妥做法：用 vite-plugin-image-optimizer 的 include/exclude 过滤小图标，让它们绕过优化流程，保持原始文件行为

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南