前端怎么用 WebAssembly？从一个浏览器图片压缩工具说起

做一个图片上传功能，最开始通常很简单：选文件，预览，调接口。需求慢慢加上来，事情就变了。图片太大，要先压一压；格式不统一，希望转成 WebP；用户还想拖动质量滑杆，看清楚压完的效果再上传。

这些工作当然可以交给服务端。但如果图片就在用户电脑里，处理完只需要一个文件，也可以把这一段留在浏览器里完成。页面负责交互，浏览器负责读图，编码库负责生成新的图片。

WebAssembly 就可以出现在这里。对前端开发者来说，日常接触它的入口往往是一个 npm 包：安装、导入、异步调用，然后把返回的数据接回页面。我们关心的是这段能力怎么进入现有项目，以及用户点下按钮后，页面能不能一直好好响应。

这篇文章用 JavaScript + Vite + Web Worker 做一个本地图片转 WebP 的小工具。Wasm 编码器使用现成的 @jsquash/webp，整个案例只写前端代码。

截图使用的是内置生成的 PNG 示例，显示的体积和耗时只对应这一次处理。

📝 前言

在 AI 大模型时代，越来越多的 Web 应用需要集成智能对话功能。然而，前端技术栈的多样性（Vue、React、jQuery 等）给开发者带来了一个难题：如何开发一个一次编写、到处运行的 AI 对话插件？

本文记录了 AI Agent Plugin 项目从诞生到完成的全过程，分享技术选型、架构设计、核心实现以及遇到的挑战与解决方案。

🎯 项目背景与目标

痛点分析

在实际项目中，我们遇到以下问题：

1. 技术栈碎片化：公司不同项目使用 Vue 2、Vue 3、React、jQuery 等不同技术栈
2. 重复开发成本高：每个技术栈都要单独开发一套 AI 对话组件
3. 维护困难：功能更新需要同步修改多个版本
4. 样式冲突：插件样式容易被宿主项目覆盖

设计目标

基于以上痛点，我们确定了以下核心目标：

• ✅ 跨框架兼容：一套代码支持 Vue、React、jQuery 等任意前端框架
• ✅ 零依赖：不依赖任何第三方框架，纯原生实现
• ✅ 样式隔离：避免与宿主项目样式冲突
• ✅ TypeScript 支持：提供完整的类型定义
• ✅ 主题定制：支持浅色/深色主题和自定义配色
• ✅ 灵活配置：支持流式/普通响应、四角定位等