JavaScript 中怎么用 Vite 处理静态图片的路径转换与压缩-js教程-PHP中文网

vite 项目中静态图片需区分开发路径解析与构建压缩：开发时自动转模块 url 并内联小图，构建时需配置 vite-plugin-imagemin 等插件实现压缩及 webp/avif 生成，public 目录资源不参与构建处理。

javascript 中怎么用 vite 处理静态图片的路径转换与压缩

在 Vite 项目中，静态图片的路径处理和压缩不是开箱即用的“全自动”流程，但借助其原生支持和插件生态，可以做到简洁高效。关键在于区分开发时的路径解析（由 Vite 自动处理）和构建时的优化（需手动配置压缩）。

开发阶段：图片路径自动转为模块 URL

Vite 在开发服务器中会将 .png、.jpg、.jpeg、.gif、.svg 等静态资源作为模块导入，自动解析为带哈希的绝对路径或 base64（小图），无需额外配置：

直接 import 图片，得到的是可直接用于 <img src> 的有效 URL
支持相对路径（如 import logo from './logo.png'）和公共目录（public/ 下的文件用绝对路径引用，不走构建流程）
小于 4kb 的图片默认内联为 base64，避免小图请求开销（阈值可通过 build.assetsInlineLimit 调整）

构建阶段：启用图片压缩（需插件）

Vite 本身不压缩图片，需引入第三方插件。推荐使用 vite-plugin-imagemin（基于 imagemin），支持 WebP、AVIF、压缩 PNG/JPG 等：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

安装：npm add -D vite-plugin-imagemin
在 vite.config.ts 中配置：

import { defineConfig } from 'vite'
import imagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.8, 0.9] },
      svgo: { plugins: [{ name: 'removeViewBox' }, { name: 'cleanupIDs' }] }
    })
  ]
})

构建时，插件会扫描 src/ 下的图片并输出压缩后版本，同时保留原始路径语义（import 不变，文件内容已优化）。

进阶技巧：按需生成 WebP / AVIF 格式

若需响应式图片（<picture></picture>），Vite 不内置多格式生成，但可结合构建脚本或插件实现：

使用 vite-plugin-responsive-picture 或自定义 Rollup 插件，在构建时为每张 PNG/JPG 生成对应 WebP
更轻量的方式：在 public/ 放原始图，用 import.meta.globEager 批量读取并生成 <sources></sources> 数据，配合组件封装
注意：浏览器兼容性需自行控制，例如用 <source type="image/webp"></source> + fallback <img>