fix(admin-web/image-webp): bundle jsquash wasm via vite resolver

Vite 在生产构建里没法解析 @jsquash/webp 自带的相对 wasm 路径,导致 WebP 编码
首次调用就失败。改成直接 import encode.js + ?url 的 wasm 资源,并在 vite.config
里把 specifier 显式 alias 到 node_modules 的真实文件,运行前再调用 init({locateFile})
告诉 wasm 加载器去拿打包后的 URL。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-28 18:35:46 +08:00
parent 4c4795e029
commit fa905519f6
3 changed files with 76 additions and 1 deletions
+28 -1
View File
@@ -1,4 +1,6 @@
import { encode } from "@jsquash/webp";
import encode, { init as initWebpEncoder } from "@jsquash/webp/encode.js";
import webpEncoderWasmUrl from "@jsquash/webp/codec/enc/webp_enc.wasm?url";
import webpEncoderSimdWasmUrl from "@jsquash/webp/codec/enc/webp_enc_simd.wasm?url";
import { reactive, readonly } from "vue";
// upload limit set to 10MB
@@ -54,6 +56,30 @@ const imageUploadProgressState = reactive<ImageUploadProgressState>({
});
let activeProgressToken = 0;
let webpEncoderReady: Promise<unknown> | null = null;
function ensureWebpEncoderReady(): Promise<unknown> {
if (webpEncoderReady) {
return webpEncoderReady;
}
const ready = initWebpEncoder({
locateFile(path: string) {
if (path === "webp_enc_simd.wasm") {
return webpEncoderSimdWasmUrl;
}
if (path === "webp_enc.wasm") {
return webpEncoderWasmUrl;
}
return path;
},
}).catch((error: unknown) => {
webpEncoderReady = null;
throw error;
});
webpEncoderReady = ready;
return ready;
}
function ensureWebpFileName(fileName: string, fallbackBaseName = "image"): string {
const trimmed = fileName.trim();
@@ -200,6 +226,7 @@ export async function convertImageFileToWebp(file: File): Promise<File> {
const imageData = await createImageDataFromBlob(file, token);
updateImageUploadProgress(token, { percent: 72, stage: "encoding" });
await ensureWebpEncoderReady();
const encoded = await encode(imageData, { quality: 82 });
updateImageUploadProgress(token, { percent: 88, stage: "finishing" });