智能前端压缩工具 (Smart Frontend Compressor)
一个高效的VSCode前端开发辅助插件，专注于PNG图片智能压缩、CSS/JS文件优化和项目构建打包。
功能特性
🖼️ 智能图片压缩
- ✅ 智能PNG压缩：自动识别大于500KB的PNG图片，智能压缩至500KB以下
- ✅ 批量处理：支持递归扫描文件夹，批量处理所有符合条件的PNG图片
- ✅ 质量控制：采用自适应压缩算法，在保证图片质量的前提下最大化压缩效果
- ✅ 原文件覆盖：直接覆盖原文件，节省存储空间
- ✅ 进度显示：实时显示压缩进度，支持用户取消操作
🚀 项目构建打包
- ✅ CSS优化：使用PostCSS生态进行CSS处理，支持嵌套语法、自动前缀、现代CSS特性转换
- ✅ JavaScript压缩：使用Terser进行JS代码压缩和优化
- ✅ 多环境支持：支持开发(dev)、测试(test)、生产(pro)三种构建环境
- ✅ 智能打包：生产环境下自动创建项目打包文件
- ✅ 文件管理：自动处理文件复制、目录创建等操作
⚙️ 配置管理
- ✅ 灵活配置：丰富的配置选项，满足不同项目需求
- ✅ 环境选择：构建时可选择不同环境，支持默认环境配置
- ✅ 参数调节：可配置压缩质量、目标大小、文件目录等参数
- ✅ 右键菜单：在资源管理器中右键文件夹直接压缩
使用方法
📁 PNG图片压缩
方法一：右键菜单（推荐）
- 在资源管理器中右键点击要压缩的文件夹
- 选择 "压缩文件夹PNG图片(至500KB以下)"
- 确认操作后，插件会自动扫描并压缩该文件夹内所有大于500KB的PNG图片
方法二：命令面板
- 按
Ctrl+Shift+P 打开命令面板
- 输入 "压缩文件夹PNG图片" 并选择
- 选择要压缩的文件夹
- 确认操作
🏗️ 项目构建打包
方法一：命令面板（推荐）
- 按
Ctrl+Shift+P 打开命令面板
- 输入 "构建并打包项目" 并选择
- 选择构建环境（开发/测试/生产）
- 确认操作，等待构建完成
方法二：右键菜单
- 在资源管理器中右键点击项目文件夹
- 选择 "构建并打包项目"
- 选择构建环境并确认
方法三：配置构建参数
- 按
Ctrl+Shift+P 打开命令面板
- 输入 "配置构建参数" 或 "打开扩展设置" 并选择
- 根据提示修改相关配置
⚙️ 访问设置面板
方法一：命令面板
- 按
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+语法的兼容性转换
- 死码消除：自动删除未使用的代码和注释
📦 项目结构处理
- 智能复制：根据配置自动复制必要文件到输出目录
- 目录管理：自动创建和管理输出目录结构
- 环境隔离：不同环境使用不同的输出配置
配置说明
🖼️ 图片压缩配置
{
"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输出目录
}
安装方法
从VSIX文件安装
- 下载插件的
.vsix文件
- 在VSCode中按
Ctrl+Shift+P
- 输入 "从VSIX安装" 并选择
- 选择下载的
.vsix文件
从源码构建
- 克隆仓库到本地
- 运行
npm install 安装依赖
- 运行
npm run compile 编译插件
- 运行
npm run package 打包为VSIX文件
使用场景
🎯 适合的开发者
- 前端开发者：需要频繁处理图片资源的前端项目
- UI/UX设计师：需要优化网页加载速度的设计项目
- 全栈开发者：需要快速构建和部署Web应用的全栈项目
📋 典型应用
- Web应用开发：压缩PNG图片，优化页面加载速度
- 移动端项目：减少图片资源大小，提升移动端体验
- 企业级项目：自动化构建流程，统一项目规范
- 个人博客：优化静态资源，提高访问速度
注意事项
⚠️ 重要提醒
- 文件覆盖：PNG压缩会直接覆盖原文件，建议提前备份
- 质量损失：压缩过程可能导致图片质量轻微下降
- 目录结构：项目构建会按照预设的目录结构组织文件
- 环境配置：不同环境的构建输出可能有所不同
📌 最佳实践
- 在进行PNG压缩前，建议先备份重要图片文件
- 对于生产环境，建议先在测试环境验证构建效果
- 定期检查配置文件，确保符合项目需求
- 大型项目建议分批处理，避免单次处理时间过长
| |
