智能前端压缩工具 (Smart Frontend Compressor)
一个高效的VSCode前端开发辅助插件，专注于PNG图片智能压缩、CSS/JS文件优化和项目构建打包。
功能特性
🖼️ 智能图片压缩
- ✅ 智能PNG压缩：自动识别大于500KB的PNG图片，智能压缩至500KB以下
- ✅ 批量处理：支持递归扫描文件夹，批量处理所有符合条件的PNG图片
- ✅ 质量控制：采用自适应压缩算法，在保证图片质量的前提下最大化压缩效果
- ✅ 原文件覆盖：直接覆盖原文件，节省存储空间
- ✅ 进度显示：实时显示压缩进度，支持用户取消操作
🚀 项目构建打包
- ✅ CSS优化：使用PostCSS生态进行CSS处理，支持嵌套语法、自动前缀、现代CSS特性转换
- ✅ JavaScript压缩：使用Terser进行JS代码压缩和优化
- ✅ 多环境支持：支持开发(dev)、测试(test)、生产(pro)三种构建环境
- ✅ 智能打包：生产环境下自动创建项目打包文件
- ✅ 一键触发：侧边栏面板提供独立的“开始构建”按钮
✂️ 字体裁切 (Font Subsetting)
- ✅ 纯JS实现：基于HarfBuzz WASM技术，无需安装Python或fontTools
- ✅ 特性保留：完美保留 GSUB/GPOS 等 OpenType 字体特性（如
ss05 等）
- ✅ 智能提取：自动从
index.html 提取所有可见文本并去重
- ✅ 多格式输出：一次处理同时生成 TTF、WOFF 和 WOFF2 格式
- ✅ 全场景调用：支持在资源管理器右键（文件/文件夹）或编辑器右键直接触发，始终作用于工作区根目录
⚙️ 配置管理
- ✅ 灵活配置：丰富的配置选项，满足不同项目需求
- ✅ 环境选择：构建时可选择不同环境，支持默认环境配置
- ✅ 参数调节：可配置压缩质量、目标大小、文件目录等参数
- ✅ 右键菜单：在资源管理器中右键文件夹直接压缩
- ✅ 预设管理：支持保存和快速切换构建配置预设
- ✅ 批量构建：支持同时选中多个文件夹进行批量构建
使用方法
📁 PNG图片压缩
方法一：右键菜单（推荐）
- 在资源管理器中右键点击要压缩的文件夹
- 选择 "压缩文件夹PNG图片(至500KB以下)"
- 确认操作后，插件会自动扫描并压缩该文件夹内所有大于500KB的PNG图片
方法二：命令面板
- 按
Ctrl+Shift+P 打开命令面板
- 输入 "压缩文件夹PNG图片" 并选择
- 选择要压缩的文件夹
- 确认操作
🏗️ 项目构建打包
方法一：命令面板（推荐）
- 按
Ctrl+Shift+P 打开命令面板
- 输入 "构建并打包项目" 并选择
- 选择构建环境（开发/测试/生产）
- 确认操作，等待构建完成
方法二：右键菜单
- 在资源管理器中右键点击项目文件夹
- 选择 "构建项目"
- 选择构建环境并确认
方法三：批量构建（多项目）
- 在资源管理器中选中多个项目文件夹
- 右键点击选中的文件夹
- 选择 "批量构建项目"
- 选择构建环境并确认
方法四：侧边栏配置面板
- 在VSCode侧边栏找到 "FJY工具箱" (logo图标)
- 在 "项目构建" 面板中配置参数
- 点击 "� 开始构建并打包项目" 按钮
✂️ 字体裁切
方法一：右键菜单（最快）
- 在资源管理器右键点击任何文件/文件夹，或在代码编辑器内右键点击
- 选择 "字体裁切"
- 插件将自动从工作区根目录的
index.html 提取文字，并根据配置路径进行裁切
方法二：侧边栏面板
- 在侧边栏 "项目构建" 视图底部找到 "字体裁切" 板块
- 确认 "源字体目录" 和 "裁剪后存放路径"
- 点击 "🚀 开始裁切字体"
📋 预设配置管理
创建预设
- 在侧边栏配置面板中设置好构建参数
- 在预设配置区域输入预设名称
- 点击 "💾 保存当前配置为预设"
使用预设
- 在预设列表中点击要使用的预设名称
- 配置会自动加载到表单中
- 点击 "🔨 构建项目" 即可使用预设配置
编辑预设
- 点击预设名称加载配置
- 修改需要的参数
- 使用相同名称保存会自动更新预设
⚙️ 访问设置面板
方法一：命令面板
- 按
Ctrl+Shift+P 打开命令面板
- 输入 "打开扩展设置" 并选择
- 在设置界面中搜索 "fjy-tools" 或 "智能前端压缩工具"
方法二：VSCode设置界面
- 按
Ctrl+, 打开设置
- 搜索 "fjy-tools"
- 找到 "智能前端压缩工具" 相关配置
方法三：扩展管理器
- 按
Ctrl+Shift+X 打开扩展管理器
- 找到 "智能前端压缩工具" 扩展
- 点击扩展详情中的 "设置" 选项卡
技术实现
🖼️ PNG压缩技术
- 压缩算法：使用UPNG.js进行高效的PNG有损压缩
- 智能策略：采用自适应质量调整算法，逐步降低压缩质量直到文件小于500KB
- 质量保护：设置最低质量限制（默认20），防止过度失真
- 透明度保持：完整保留PNG图片的透明通道信息
🎨 CSS处理技术
- PostCSS生态：集成PostCSS及其插件生态
- 嵌套语法：支持PostCSS嵌套语法，编写更优雅的CSS
- 自动前缀：使用autoprefixer自动添加浏览器前缀
- 现代特性：使用postcss-preset-env转换现代CSS语法
⚡ JavaScript优化
- 代码压缩：使用Terser进行JavaScript代码压缩和优化
- 语法转换：支持ES6+语法的兼容性转换
- 死码消除：自动删除未使用的代码和注释
✂️ 字体裁切技术
- HarfBuzz WASM：集成 HarfBuzz 的 WebAssembly 版本进行高性能字体处理
- OpenType 特性保留：不同于常规工具，本插件能完整保留 GSUB/GPOS 表，确保 ss05 等高级排版特性不丢失
- WASM 加速：裁切逻辑在 JS 环境下运行，速度快且不依赖外部二进制环境
- Cheerio 提取：使用 Cheerio 高效解析 HTML，精确提取 body 内的可见字符
📦 项目结构处理
- 智能复制：根据配置自动复制必要文件到输出目录
- 目录管理：自动创建和管理输出目录结构
- 环境隔离：不同环境使用不同的输出配置
配置说明
🖼️ 图片压缩配置
{
"fjyTools.targetSize": 500, // 目标文件大小(KB)
"fjyTools.defaultQuality": 50, // 默认压缩质量
"fjyTools.minQuality": 20, // 最低质量限制
"fjyTools.qualityStep": 10 // 质量调整步长
}
🏗️ 项目构建配置
{
"fjyTools.build.defaultEnv": "dev", // 默认构建环境
"fjyTools.build.showEnvSelector": true, // 是否显示环境选择
"fjyTools.build.filesToCopy": [ // 要复制的文件列表
"index.html", "favicon.ico", "base", "css", "images", "script"
],
"fjyTools.build.cssSourceDir": "one-css", // CSS源文件目录
"fjyTools.build.jsSourceDir": "one-js", // JS源文件目录
"fjyTools.build.cssOutputDir": "css", // CSS输出目录
"fjyTools.build.jsOutputDir": "script", // JS输出目录
"fjyTools.build.presets": [ // 构建预设配置列表
{
"name": "生产环境",
"env": "pro",
"filesToCopy": ["index.html", "favicon.ico", "css", "script"],
"cssSourceDir": "one-css",
"cssOutputDir": "css",
"jsSourceDir": "one-js",
"jsOutputDir": "script",
"showEnvSelector": false
}
],
"fjyTools.fontSubset.srcPath": "css/font/.font-spider", // 字体裁切源目录
"fjyTools.fontSubset.destPath": "css/font" // 字体裁切输出目录
}
安装方法
从VSIX文件安装
- 下载插件的
.vsix文件
- 在VSCode中按
Ctrl+Shift+P
- 输入 "从VSIX安装" 并选择
- 选择下载的
.vsix文件
从源码构建
- 克隆仓库到本地
- 运行
npm install 安装依赖
- 运行
npm run compile 编译插件
- 运行
npm run package 打包为VSIX文件
上传插件
- npm install --production
- vsce package
- vsce publish
使用场景
🎯 适合的开发者
- 前端开发者：需要频繁处理图片资源的前端项目
- UI/UX设计师：需要优化网页加载速度的设计项目
- 全栈开发者：需要快速构建和部署Web应用的全栈项目
📋 典型应用
- Web应用开发：压缩PNG图片，优化页面加载速度
- 移动端项目：减少图片资源大小，提升移动端体验
- 企业级项目：自动化构建流程，统一项目规范
- 个人博客：优化静态资源，提高访问速度
注意事项
⚠️ 重要提醒
- 文件覆盖：PNG压缩会直接覆盖原文件，建议提前备份
- 质量损失：压缩过程可能导致图片质量轻微下降
- 目录结构：项目构建会按照预设的目录结构组织文件
- 环境配置：不同环境的构建输出可能有所不同
📌 最佳实践
- 在进行PNG压缩前，建议先备份重要图片文件
- 对于生产环境，建议先在测试环境验证构建效果
- 定期检查配置文件，确保符合项目需求
- 大型项目建议分批处理，避免单次处理时间过长
版本历史
v2.0.0 (2026-02-03)
- ✨ 重大更新：新增全新“字体裁切”功能模块
- 🚀 零依赖：采用 JS 模式（subset-font），彻底摆脱对 Python、fontTools 等外部环境的依赖
- 💎 高级特性：完美支持 OpenType 特性保留（GSUB/GPOS），裁切后的字体依然保留 ss05 等高级排版效果
- 🖱️ 快捷调用：新增资源管理器和编辑器右键菜单，一键触发字体裁切
- 🎨 UI 升级：侧边栏面板全新布局，项目构建与字体裁切功能解耦
- 🔧 功能解耦：移除构建流程中旧版 font-spider 逻辑，改为更可控的独立裁切模式
- 🧹 清理优化：删除了小语种开发设置相关冗余代码，卸载了无用的 fonteditor-core 等依赖
v1.1.2 (2024-12-15)
- 🐛 修复扩展激活时的JavaScript语法错误
- ✨ 新增预设配置管理功能
- 🔧 优化批量构建参数处理
- 🎨 改进用户界面和交互体验
v1.0.0 (2024-12-11)
- 🎉 首次发布，包含PNG智能压缩和项目构建功能
- 📦 集成PostCSS和Terser处理流程
- ⚙️ 完整的配置管理系统
贡献指南
欢迎提交Issue和Pull Request来帮助改进这个插件！
🐛 Bug报告
如果遇到问题，请提供以下信息：
- VSCode版本
- 操作系统版本
- 插件版本
- 详细的重现步骤
- 错误截图或日志
💡 功能建议
欢迎提出新的功能建议，建议包含：
- 功能描述和使用场景
- 预期的用户价值
- 可能的实现方式
感谢使用智能前端压缩工具！ 🎉
