PixelSwift,支持图片压缩、格式转换和尺寸调整,全程不发任何网络请求.运行时需要检测浏览器是否支持 SIMD,然后加载对应的文件:.这篇文章主要记录一下实现过程中的技术方案和遇到的问题。说实话,用WASMZuo图片压缩还是挺有意思的.

在前端进行图片压缩意味着用户的图片数据不需要离开用户的设备,这减少了数据在传输过程中被截获的风险,增强了用户数据的隐私保护.咱就是说,现在大家对数据安全douhen重视.

通过将Rust代码编译成Wasm,我们Ke以在浏览器端执行复杂的图片处理任务,而无需依赖服务器.哈哈,这想法不错吧.

,确保安装了Rust和wasm-pack.为了防止浏览器在压缩期间冻结,我们构建了专用的 Web Worker 架构.

用 WASM 实现纯浏览器端的图片压缩,完全不需要后端,你懂的.

@jsquash/jpeg Mozilla 出品,压缩率Zui优.PNG 压缩 upng-js 有损量化,原理同 TinyPNG.

const Module = require const fs = require var pixels = require const webp = require; // 图片太大会OOM // const imgPath = './s.jpg' const imgPath = './s3.jpg' const wasmOutPath = './wasm-out.webp' async function getImageData { return pixels } Module.onRuntimeInitialized = async = { const api = { version: Module.cwrap, create_buffer: Module.cwrap, destroy_buffer: Module.cwrap, encode: Module.cwrap('encode', '', ); // Transferable，零拷贝 worker.onmessage = => { const { id, type, result } = e.data; if { const blob = new Blob; updateUI; }

Vite 的依赖预构建会试图 bundle 所有依赖，但 @jsquash 系列的 WASM 文件加载机制跟 Vite 不兼容.

export default defineNuxtConfig({ vite: { optimizeDeps: { exclude: } }

@jsquash/webp 提供了两份 WASM binary：普通版和 SIMD 优化版。运行时需要检测浏览器是否支持 SIMD，然后加载对应的文件：害,这个优化hen重要.

import { simd } from 'wasm-feature-detect'; const hasSIMD = await simd; const wasmPath = hasSIMD ? '/wasm/webp_enc_simd.wasm' : '/wasm/webp_enc.wasm'; await initWebPEncoder;

Sitemap、Schema.org 这些我第一天就配好了但 Google 不在乎你 sitemap 多完美——站上只有 个页面它不会认为你是个有价值的站点。

NULT建设经验两个教训一是内容比技术优化重要；二是不要过早优化。我花了两天Zuo WASM 的 bundle splitting，把每个编解码器拆成独立 chunk。后来发现用户上传文件时一个 import 加载就行了根本不需要那么细粒度的拆分。 )