SACSS Profit Analyzer
一个VSCode插件，用于分析HTML链接中的内联样式并进行原子化转换分析。
功能特性
- 分析指定URL的HTML文档中的所有内联样式链接
- 自动获取CSS文件并计算原始大小
- 使用原子化转换算法计算优化后的大小
- 提供详细的压缩收益分析报告
- 支持相对URL和绝对URL的处理
安装和开发
环境要求
- Node.js 16+
- VSCode 1.74+
- TypeScript 4.9+
开发环境设置
- 克隆此仓库到本地
- 在项目根目录运行
npm install 安装依赖
- 运行
npm run compile 编译TypeScript代码
- 在VSCode中按
F5 启动调试模式
测试
- 运行
npm run test-server 启动本地测试服务器
- 在VSCode中按
F5 启动插件调试模式
- 在新打开的VSCode窗口中，按
Ctrl+Shift+P 打开命令面板
- 输入 "分析URL中的CSS原子化收益" 并选择
- 输入测试URL:
http://localhost:3000/test.html
打包发布
npm install -g vsce
npm run package
使用方法
- 在VSCode中打开命令面板 (
Ctrl+Shift+P 或 Cmd+Shift+P)
- 输入 "分析URL中的CSS原子化收益" 并选择该命令
- 在弹出的输入框中输入要分析的HTML URL
- 等待分析完成，查看结果
分析流程
- 获取HTML文档: 请求指定的URL获取HTML内容
- 提取CSS链接: 解析HTML中的所有
<style data-href="..."> 标签
- 获取CSS文件: 请求每个CSS文件并记录原始大小
- 原子化转换: 使用CSS解析库将CSS转换为AST，然后调用transform函数
- 计算收益: 比较原始大小和原子化后的大小，计算节省的字节数
- 生成报告: 显示详细的分析结果和统计信息
在 src/extension.ts 文件中，你需要替换 transform 函数的实现：
function transform(cssAst: css.Stylesheet): number {
// 在这里实现你的原子化转换算法
// 返回转换后的字节数
return estimatedSize;
}
输出示例
=== 分析结果 ===
总CSS文件数: 3
总原始大小: 15420 字节 (15.06 KB)
总原子化大小: 8230 字节 (8.04 KB)
总节省大小: 7190 字节 (7.02 KB)
压缩率: 46.63%
=== 详细结果 ===
1. https://example.com/styles/main.css
原始: 8230 字节, 原子化: 4120 字节, 节省: 4110 字节
2. https://example.com/styles/components.css
原始: 4560 字节, 原子化: 2340 字节, 节省: 2220 字节
3. https://example.com/styles/utilities.css
原始: 2630 字节, 原子化: 1770 字节, 节省: 860 字节
依赖项
axios: HTTP请求库cheerio: HTML解析库css: CSS解析库@types/vscode: VSCode类型定义
开发
# 安装依赖
npm install
# 编译TypeScript
npm run compile
# 监听文件变化并自动编译
npm run watch
注意事项
- 确保目标网站允许跨域请求
- 某些网站可能需要特定的User-Agent或其他请求头
- 网络连接不稳定可能影响分析结果
- transform函数的实现需要根据具体的原子化算法来定制
许可证
MIT
| |
