pnpm add -D imagemin imagemin-webp

import imagemin from "imagemin"
import imageminWebp from "imagemin-webp"
import path from "path"
import fs from "fs"
import { fileURLToPath } from "url"

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

/**
 * 圖片轉(zhuǎn) WebP 腳本
 * 將 src/assets 目錄下的 jpg/jpeg/png 圖片轉(zhuǎn)換為 webp 格式
 */
async function convertImages() {
  const assetsDir = path.join(__dirname, "../src/assets")

  // 檢查目錄是否存在
  if (!fs.existsSync(assetsDir)) {
    console.log("??  assets 目錄不存在，跳過圖片轉(zhuǎn)換")
    return
  }

  console.log("???  開始轉(zhuǎn)換圖片為 WebP 格式...")

  try {
    const files = await imagemin([`${assetsDir}/*.{jpg,jpeg,png}`], {
      destination: assetsDir,
      plugins: [
        imageminWebp({
          quality: 80, // 質(zhì)量 0-100，80 是質(zhì)量和文件大小的良好平衡
          method: 6, // 壓縮方法 0-6，6 是最慢但壓縮率最高
        }),
      ],
    })

    if (files.length === 0) {
      console.log("??  沒有找到需要轉(zhuǎn)換的圖片")
    } else {
      console.log(`? 成功轉(zhuǎn)換 ${files.length} 張圖片為 WebP 格式:`)
      files.forEach((file) => {
        const fileName = path.basename(file.destinationPath)
        const originalSize = fs.statSync(
          file.sourcePath.replace(/\.webp$/, path.extname(file.sourcePath))
        ).size
        const webpSize = fs.statSync(file.destinationPath).size
        const reduction = ((1 - webpSize / originalSize) * 100).toFixed(1)
        console.log(`   - ${fileName} (減少 ${reduction}%)`)
      })
    }
  } catch (error) {
    console.error("? 圖片轉(zhuǎn)換失敗:", error.message)
    process.exit(1)
  }
}

// 執(zhí)行轉(zhuǎn)換
convertImages()

/**
 * 圖片工具函數(shù) - 支持 WebP 格式
 */

const WEBP_SUPPORT_CACHE_KEY = "__webp_support__"

/**
 * 檢測(cè)瀏覽器是否支持 WebP 格式（帶緩存）
 * 使用 localStorage 緩存檢測(cè)結(jié)果，避免重復(fù)檢測(cè)
 */
export function checkWebPSupport(): Promise<boolean> {
  // 先檢查緩存
  if (typeof window !== "undefined" && window.localStorage) {
    const cached = window.localStorage.getItem(WEBP_SUPPORT_CACHE_KEY)
    if (cached !== null) {
      return Promise.resolve(cached === "true")
    }
  }

  // 如果沒有緩存，進(jìn)行檢測(cè)
  return new Promise((resolve) => {
    const webP = new Image()
    webP.onload = webP.onerror = () => {
      const supported = webP.height === 2
      // 緩存結(jié)果
      if (typeof window !== "undefined" && window.localStorage) {
        window.localStorage.setItem(WEBP_SUPPORT_CACHE_KEY, String(supported))
      }
      resolve(supported)
    }
    webP.src =
      "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"
  })
}

/**
 * 同步獲取 WebP 支持狀態(tài)（從緩存）
 * 如果緩存不存在，默認(rèn)返回 true（現(xiàn)代瀏覽器都支持）
 * 這樣可以避免初始加載非 WebP 資源
 */
export function getWebPSupportSync(): boolean {
  if (typeof window === "undefined" || !window.localStorage) {
    // SSR 環(huán)境，默認(rèn)返回 true
    return true
  }

  const cached = window.localStorage.getItem(WEBP_SUPPORT_CACHE_KEY)
  if (cached !== null) {
    return cached === "true"
  }

  // 沒有緩存時(shí)，默認(rèn)假設(shè)支持（現(xiàn)代瀏覽器都支持 WebP）
  // 如果實(shí)際不支持，后續(xù)檢測(cè)會(huì)更新緩存，下次就會(huì)使用正確的值
  return true
}

/**
 * 將圖片 URL 轉(zhuǎn)換為 WebP 格式
 * 支持多種轉(zhuǎn)換方式：
 * 1. 內(nèi)置圖片：直接替換擴(kuò)展名
 * 2. 在線圖片：使用圖片代理服務(wù)或 CDN 轉(zhuǎn)換
 *
 * @param url 原始圖片 URL
 * @param options 轉(zhuǎn)換選項(xiàng)
 * @returns WebP 格式的 URL
 */
export function convertToWebP(
  url: string,
  options: {
    // 是否強(qiáng)制使用 WebP（即使瀏覽器不支持）
    force?: boolean
    // 圖片代理服務(wù) URL（用于在線圖片轉(zhuǎn)換）
    proxyUrl?: string
    // CDN 轉(zhuǎn)換參數(shù)（如騰訊云、阿里云等）
    cdnParams?: string
  } = {}
): string {
  const { force = false, proxyUrl, cdnParams } = options

  // 如果是 data URL，直接返回
  if (url.startsWith("data:")) {
    return url
  }

  // 如果是內(nèi)置圖片（相對(duì)路徑或 umi 處理后的路徑），替換擴(kuò)展名
  // 支持 umi 處理后的路徑格式：/static/yay.7d162f31.jpg -> /static/yay.7d162f31.webp
  if (
    url.startsWith("./") ||
    url.startsWith("../") ||
    (!url.startsWith("http") && !url.startsWith("data:"))
  ) {
    // 匹配 .jpg, .jpeg, .png 擴(kuò)展名（可能包含 hash）
    return url.replace(/\.(jpg|jpeg|png)(\?.*)?$/i, ".webp$2")
  }

  // 在線圖片處理
  if (url.startsWith("http://") || url.startsWith("https://")) {
    // 方式1: 使用圖片代理服務(wù)
    if (proxyUrl) {
      return `${proxyUrl}?url=${encodeURIComponent(url)}&format=webp`
    }

    // 方式2: 使用 CDN 參數(shù)轉(zhuǎn)換（如騰訊云、阿里云等）
    if (cdnParams) {
      const separator = url.includes("?") ? "&" : "?"
      return `${url}${separator}${cdnParams}`
    }

    // 方式3: 使用在線圖片轉(zhuǎn)換服務(wù)（如 Cloudinary、ImageKit 等）
    // 這里提供一個(gè)示例，實(shí)際使用時(shí)需要根據(jù)服務(wù)商調(diào)整
    // return `https://your-image-service.com/convert?url=${encodeURIComponent(url)}&format=webp`;

    // 方式4: 簡(jiǎn)單替換擴(kuò)展名（如果服務(wù)器支持）
    return url.replace(/\.(jpg|jpeg|png)(\?.*)?$/i, ".webp$2")
  }

  return url
}

/**
 * 獲取圖片的最佳格式 URL
 * 如果瀏覽器支持 WebP，返回 WebP 格式；否則返回原始格式
 *
 * @param originalUrl 原始圖片 URL
 * @param webpUrl WebP 格式的 URL（可選，如果不提供則自動(dòng)生成）
 * @param webpSupported 瀏覽器是否支持 WebP（可選，如果不提供則自動(dòng)檢測(cè)）
 * @returns 最佳格式的 URL
 */
export async function getBestImageUrl(
  originalUrl: string,
  webpUrl?: string,
  webpSupported?: boolean
): Promise<string> {
  const isSupported =
    webpSupported !== undefined ? webpSupported : await checkWebPSupport()

  if (isSupported) {
    return webpUrl || convertToWebP(originalUrl)
  }

  return originalUrl
}

/**
 * 預(yù)加載圖片
 */
export function preloadImage(url: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => resolve()
    img.onerror = reject
    img.src = url
  })
}

<template>
  <picture>
    <!-- 如果支持 WebP，優(yōu)先使用 WebP -->
    <source
      v-if="webpSupported && webpSrc"
      :srcset="webpSrc"
      type="image/webp"
    />
    <!-- 回退到原始格式 -->
    <img
      :src="fallbackSrc"
      :alt="alt"
      :width="width"
      :height="height"
      :class="imgClass"
      :style="imgStyle"
      :loading="loading"
      @load="handleLoad"
      @error="handleError"
    />
  </picture>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue"
import {
  checkWebPSupport,
  getWebPSupportSync,
  convertToWebP,
} from "../utils/image"

interface Props {
  // 原始圖片 URL（必需）
  src: string
  // WebP 格式的 URL（可選，如果不提供則自動(dòng)生成）
  webpSrc?: string
  // 圖片描述
  alt?: string
  // 圖片寬度
  width?: string | number
  // 圖片高度
  height?: string | number
  // CSS 類名
  imgClass?: string
  // 內(nèi)聯(lián)樣式
  imgStyle?: string | Record<string, any>
  // 懶加載
  loading?: "lazy" | "eager"
  // 圖片代理服務(wù) URL（用于在線圖片轉(zhuǎn)換）
  proxyUrl?: string
  // CDN 轉(zhuǎn)換參數(shù)
  cdnParams?: string
}

const props = withDefaults(defineProps<Props>(), {
  alt: "",
  loading: "lazy",
})

const emit = defineEmits<{
  load: [event: Event]
  error: [event: Event]
}>()

// 使用同步方法獲取初始值，避免初始加載非 WebP 資源
// 如果緩存不存在，默認(rèn)假設(shè)支持（現(xiàn)代瀏覽器都支持）
// 后續(xù)異步檢測(cè)會(huì)更新這個(gè)值
const webpSupported = ref(getWebPSupportSync())

// 計(jì)算 WebP 格式的 URL
const webpSrc = computed(() => {
  // 如果明確提供了 webpSrc，直接使用
  if (props.webpSrc) {
    return props.webpSrc
  }

  // 對(duì)于在線圖片，只有在提供了轉(zhuǎn)換方式時(shí)才生成 WebP URL
  const isOnlineImage =
    props.src.startsWith("http://") || props.src.startsWith("https://")
  if (isOnlineImage) {
    if (!props.proxyUrl && !props.cdnParams) {
      // 如果沒有提供轉(zhuǎn)換方式，返回空字符串，使用原始格式
      return ""
    }
    // 有轉(zhuǎn)換方式，生成 WebP URL
    return convertToWebP(props.src, {
      proxyUrl: props.proxyUrl,
      cdnParams: props.cdnParams,
    })
  }

  // 對(duì)于內(nèi)置圖片（通過 import 導(dǎo)入的），自動(dòng)嘗試使用 WebP 版本
  // 構(gòu)建腳本會(huì)在同目錄下生成 .webp 文件，通過替換擴(kuò)展名來引用
  // 如果 webp 文件不存在，瀏覽器會(huì)自動(dòng)回退到原始圖片
  return convertToWebP(props.src, {})
})

// 回退到原始格式
const fallbackSrc = computed(() => props.src)

// 在后臺(tái)異步檢測(cè) WebP 支持（如果緩存不存在）
// 這樣可以更新緩存，但不影響初始渲染
onMounted(async () => {
  // 如果已經(jīng)有緩存，就不需要再次檢測(cè)
  if (typeof window !== "undefined" && window.localStorage) {
    const cached = window.localStorage.getItem("__webp_support__")
    if (cached === null) {
      // 沒有緩存，進(jìn)行檢測(cè)并更新
      const supported = await checkWebPSupport()
      // 如果檢測(cè)結(jié)果與初始假設(shè)不同，更新狀態(tài)
      // 但此時(shí)圖片可能已經(jīng)加載，瀏覽器會(huì)使用 <picture> 標(biāo)簽自動(dòng)選擇
      if (supported !== webpSupported.value) {
        webpSupported.value = supported
      }
    }
  } else {
    // 沒有 localStorage，直接檢測(cè)
    webpSupported.value = await checkWebPSupport()
  }
})

const handleLoad = (event: Event) => {
  emit("load", event)
}

const handleError = (event: Event) => {
  emit("error", event)
}
</script>

/**
 * 圖片文件類型聲明
 */
declare module "*.jpg" {
  const content: string
  export default content
}

declare module "*.jpeg" {
  const content: string
  export default content
}

declare module "*.png" {
  const content: string
  export default content
}

declare module "*.gif" {
  const content: string
  export default content
}

declare module "*.webp" {
  const content: string
  export default content
}

declare module "*.svg" {
  const content: string
  export default content
}

declare module "*.ico" {
  const content: string
  export default content
}

declare module "*.bmp" {
  const content: string
  export default content
}

import { defineConfig } from "umi"
import { routes } from "./src/router/index"

const isPrd = process.env.NODE_ENV === "production"

export default defineConfig({
  npmClient: "pnpm",
  presets: [require.resolve("@umijs/preset-vue")],
  manifest: {
    fileName: "manifest.json",
  },
  // 開發(fā)環(huán)境 vite ，線上環(huán)境 webpack 打包
  vite: isPrd ? false : {},
  chainWebpack: function (config, { webpack }) {
    // 配置 webp 文件支持（與 jpg/png 一樣處理）
    // umi 默認(rèn)已經(jīng)處理圖片，但可能不包含 webp，這里確保 webp 被正確處理
    // 使用 asset/resource 類型，讓 webpack 將 webp 文件作為靜態(tài)資源處理
    if (!config.module.rules.has("webp")) {
      config.module
        .rule("webp")
        .test(/\.webp$/)
        .type("asset/resource")
        .generator({
          filename: "static/[name].[hash:8][ext]",
        })
    }

    config.optimization.runtimeChunk(true)
    return config
  },
  codeSplitting: {
    jsStrategy: "depPerChunk",
  },
  hash: true,
  history: { type: "hash" },
  routes,
})

{
  "scripts": {
    "dev": "umi dev",
    "build": "pnpm build:images && umi build",
    "build:prd": "pnpm build:images && UMI_ENV=prd umi build",
    "build:images": "node scripts/convert-images.mjs",
    "postinstall": "umi setup",
    "start": "npm run dev",
    "preview": "umi preview",
    "analyze": "ANALYZE=1 umi build"
  }
}

<script setup lang="ts">
import WebPImage from "../components/WebPImage.vue"
import yayImage from "../assets/yay.jpg"
import yayWebpImage from "../assets/yay.webp"
</script>

<template>
  <div>
    <!-- 方式1: 自動(dòng)檢測(cè)并使用 WebP -->
    <WebPImage :src="yayImage" width="388" alt="圖片" />

    <!-- 方式2: 手動(dòng)指定 WebP 文件 -->
    <WebPImage
      :src="yayImage"
      :webp-src="yayWebpImage"
      width="388"
      alt="圖片"
    />
  </div>
</template>

<template>
  <!-- 阿里云 OSS -->
  <WebPImage
    src="https://your-bucket.oss-cn-hangzhou.aliyuncs.com/image.jpg"
    cdn-params="x-oss-process=image/format,webp"
    width="500"
    alt="CDN 圖片"
  />

  <!-- 騰訊云 COS -->
  <WebPImage
    src="https://your-bucket.cos.ap-shanghai.myqcloud.com/image.jpg"
    cdn-params="imageMogr2/format/webp"
    width="500"
    alt="CDN 圖片"
  />
</template>

<script setup lang="ts">
const proxyUrl = "https://your-image-proxy.com/convert"
</script>

<template>
  <WebPImage
    src="https://example.com/image.jpg"
    :proxy-url="proxyUrl"
    width="500"
    alt="在線圖片"
  />
</template>