52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
|
const fs = require('fs');
|
|||
|
|
const path = require('path');
|
|||
|
|
|
|||
|
|
// 源图片目录和构建后的图片目录
|
|||
|
|
const srcDir = path.join(__dirname, 'src', 'assets');
|
|||
|
|
const distDir = path.join(__dirname, 'dist', 'img');
|
|||
|
|
|
|||
|
|
// 比较源图片和构建后图片的大小
|
|||
|
|
function compareImageSizes() {
|
|||
|
|
try {
|
|||
|
|
// 读取dist目录下的所有图片文件
|
|||
|
|
const distFiles = fs.readdirSync(distDir).filter(file => file.endsWith('.png'));
|
|||
|
|
|
|||
|
|
console.log('图片优化效果验证（源图片 vs 构建后图片）:');
|
|||
|
|
console.log('-' .repeat(70));
|
|||
|
|
console.log('源文件名'.padEnd(25), '构建后文件名'.padEnd(30), '大小对比');
|
|||
|
|
console.log('-' .repeat(70));
|
|||
|
|
|
|||
|
|
// 遍历dist目录下的图片文件
|
|||
|
|
for (const distFile of distFiles) {
|
|||
|
|
// 提取源文件名（去掉hash和扩展名）
|
|||
|
|
const srcFileName = distFile.replace(/\.[a-f0-9]{8}\.png$/, '.png');
|
|||
|
|
const srcPath = path.join(srcDir, srcFileName);
|
|||
|
|
const distPath = path.join(distDir, distFile);
|
|||
|
|
|
|||
|
|
// 检查源文件是否存在
|
|||
|
|
if (fs.existsSync(srcPath)) {
|
|||
|
|
const srcStats = fs.statSync(srcPath);
|
|||
|
|
const distStats = fs.statSync(distPath);
|
|||
|
|
|
|||
|
|
const srcSize = srcStats.size;
|
|||
|
|
const distSize = distStats.size;
|
|||
|
|
const reduction = ((srcSize - distSize) / srcSize * 100).toFixed(2);
|
|||
|
|
|
|||
|
|
console.log(
|
|||
|
|
srcFileName.padEnd(25),
|
|||
|
|
distFile.padEnd(30),
|
|||
|
|
`${(srcSize / 1024).toFixed(2)}KB → ${(distSize / 1024).toFixed(2)}KB (减少${reduction}%)`
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('-' .repeat(70));
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('验证图片优化效果时出错:', error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 执行验证
|
|||
|
|
compareImageSizes();
|