WebP Switcher(VSCode 插件)
这是一份独立于业务代码的新插件工程,用于:
- PNG → WebP(cwebp)
- 一键替换代码中引用的
.png 后缀为 .webp
- 在转换/替换之后输出总结报告(数量、总体体积变化、逐图百分比)
- 输出一份 iOS14 兼容性提示(非阻断)
说明:此插件不会修改你现有的 scripts/tinify/batch-assets.mjs;这里只是复刻能力并提供 VSCode 交互。
你预期的交互(已按此设计)
- 资源管理器右键:对文件/文件夹执行“添加到待转换区”
- 左侧 WebP Switcher 面板:
待转换区:展示已添加的 PNG,可移除/清空
- 顶部按钮:
- 待转换区:转换并替换引用、清空待转换区
- 报告:清空报告
报告:展示本次转换/替换的汇总与逐图列表,并包含兼容性提示摘要
开发/调试
- 在 VSCode 中打开该目录:
tools/vscode-tinify-assets
- 安装依赖:
npm i
- 编译:
npm run compile
- 按
F5 启动 Extension Development Host 进行调试
已在本工程内置 launch.json:调试时会自动打开本仓库根目录,方便直接右键添加 PNG 测试。
WebP 压缩质量(全局)
在 待转换区 顶部按钮里点击“设置压缩质量”(齿轮),用下拉框选择:
- 无损
- 90% / 80% / 70% / 60% / 50% / 40%
- 自定义(1~100)
该质量为全局唯一值,会保存在工作区状态中。
cwebp 二进制
扩展运行时会尝试执行内置的 cwebp:
- mac:
resources/bin/cwebp
- win:
resources/bin/cwebp.exe
如果缺失,会提示“未找到内置 cwebp”。(后续会配套分平台打包/发布脚本来确保 VSIX 内包含对应二进制)
分平台打包/发布(mac + win)
先拉取二进制(不提交到 git):
npm run cwebp:fetch
脚本会自动下载并放置到:
vendor/cwebp/darwin-arm64/cwebp
vendor/cwebp/win32-x64/cwebp.exe
然后在插件目录执行:
npm run release:package
- 发布(一次性发布 mac + win 两个平台):
npm run release:publish
| |