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:
@@ -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";
|
import { reactive, readonly } from "vue";
|
||||||
|
|
||||||
// upload limit set to 10MB
|
// upload limit set to 10MB
|
||||||
@@ -54,6 +56,30 @@ const imageUploadProgressState = reactive<ImageUploadProgressState>({
|
|||||||
});
|
});
|
||||||
|
|
||||||
let activeProgressToken = 0;
|
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 {
|
function ensureWebpFileName(fileName: string, fallbackBaseName = "image"): string {
|
||||||
const trimmed = fileName.trim();
|
const trimmed = fileName.trim();
|
||||||
@@ -200,6 +226,7 @@ export async function convertImageFileToWebp(file: File): Promise<File> {
|
|||||||
|
|
||||||
const imageData = await createImageDataFromBlob(file, token);
|
const imageData = await createImageDataFromBlob(file, token);
|
||||||
updateImageUploadProgress(token, { percent: 72, stage: "encoding" });
|
updateImageUploadProgress(token, { percent: 72, stage: "encoding" });
|
||||||
|
await ensureWebpEncoderReady();
|
||||||
const encoded = await encode(imageData, { quality: 82 });
|
const encoded = await encode(imageData, { quality: 82 });
|
||||||
|
|
||||||
updateImageUploadProgress(token, { percent: 88, stage: "finishing" });
|
updateImageUploadProgress(token, { percent: 88, stage: "finishing" });
|
||||||
|
|||||||
+42
@@ -0,0 +1,42 @@
|
|||||||
|
declare module "@jsquash/webp/encode.js" {
|
||||||
|
type WebpEncodeOptions = {
|
||||||
|
quality: number;
|
||||||
|
target_size: number;
|
||||||
|
target_PSNR: number;
|
||||||
|
method: number;
|
||||||
|
sns_strength: number;
|
||||||
|
filter_strength: number;
|
||||||
|
filter_sharpness: number;
|
||||||
|
filter_type: number;
|
||||||
|
partitions: number;
|
||||||
|
segments: number;
|
||||||
|
pass: number;
|
||||||
|
show_compressed: number;
|
||||||
|
preprocessing: number;
|
||||||
|
autofilter: number;
|
||||||
|
partition_limit: number;
|
||||||
|
alpha_compression: number;
|
||||||
|
alpha_filtering: number;
|
||||||
|
alpha_quality: number;
|
||||||
|
lossless: number;
|
||||||
|
exact: number;
|
||||||
|
image_hint: number;
|
||||||
|
emulate_jpeg_size: number;
|
||||||
|
thread_level: number;
|
||||||
|
low_memory: number;
|
||||||
|
near_lossless: number;
|
||||||
|
use_delta_palette: number;
|
||||||
|
use_sharp_yuv: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type WebpEncoderInitOptions = {
|
||||||
|
locateFile?: (path: string, scriptDirectory: string) => string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function init(moduleOptionOverrides?: WebpEncoderInitOptions): Promise<unknown>;
|
||||||
|
|
||||||
|
export default function encode(
|
||||||
|
data: ImageData,
|
||||||
|
options?: Partial<WebpEncodeOptions>,
|
||||||
|
): Promise<ArrayBuffer>;
|
||||||
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import { createRequire } from "node:module";
|
||||||
import { fileURLToPath, URL } from "node:url";
|
import { fileURLToPath, URL } from "node:url";
|
||||||
|
|
||||||
import vue from "@vitejs/plugin-vue";
|
import vue from "@vitejs/plugin-vue";
|
||||||
@@ -6,6 +7,8 @@ import { defineConfig, loadEnv, type PluginOption } from "vite";
|
|||||||
import { compression } from "vite-plugin-compression2";
|
import { compression } from "vite-plugin-compression2";
|
||||||
|
|
||||||
const r = (path: string) => fileURLToPath(new URL(path, import.meta.url));
|
const r = (path: string) => fileURLToPath(new URL(path, import.meta.url));
|
||||||
|
const nodeRequire = createRequire(import.meta.url);
|
||||||
|
const resolveNodeModule = (specifier: string) => nodeRequire.resolve(specifier);
|
||||||
|
|
||||||
export default defineConfig(({ mode }) => {
|
export default defineConfig(({ mode }) => {
|
||||||
const env = loadEnv(mode, ".", "");
|
const env = loadEnv(mode, ".", "");
|
||||||
@@ -42,6 +45,9 @@ export default defineConfig(({ mode }) => {
|
|||||||
"@": r("./src"),
|
"@": r("./src"),
|
||||||
"@geo/shared-types": r("../../packages/shared-types/src/index.ts"),
|
"@geo/shared-types": r("../../packages/shared-types/src/index.ts"),
|
||||||
"@geo/http-client": r("../../packages/http-client/src/index.ts"),
|
"@geo/http-client": r("../../packages/http-client/src/index.ts"),
|
||||||
|
"@jsquash/webp/encode.js": resolveNodeModule("@jsquash/webp/encode.js"),
|
||||||
|
"@jsquash/webp/codec/enc/webp_enc.wasm": resolveNodeModule("@jsquash/webp/codec/enc/webp_enc.wasm"),
|
||||||
|
"@jsquash/webp/codec/enc/webp_enc_simd.wasm": resolveNodeModule("@jsquash/webp/codec/enc/webp_enc_simd.wasm"),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
server: {
|
server: {
|
||||||
|
|||||||
Reference in New Issue
Block a user