前端项目优化-清理大量废弃的图片资源

353 阅读13分钟

有这样一个场景:当我们的项目迭代了很多次的版本,每次版本迭代的开发周期很短、很急就导致你没有办法去优化之前的代码。有很多的垃圾代码和图片资源被遗留到最后,这就使得你的项目包巨大,屎山代码一堆,这个时候你打算怎么办?人工一个一个去查找哪些图片是没有用到然后手动删除吗? 这个难度我想应该不言而喻。

1.首先我们要删除(这一步得手动操作,难度不大)没有用到的.vue、js、html、ts文件,因为npm run build打包的时候,在你的.vue、js、html、ts文件中引用到了图片的话,这些图片就会被打包进去。如果你的文件中没有引用到,即使你的图片放在了assets/images目录下它也不会被打包进去,因为没有引用。(这一点尤其重要!!!!!)

2.删除了不用的文件之后,接下来就是删除掉不用的图片。这个就得node结合js脚本来执行了。大概的思路就是:遍历你项目的所有.vue', '.ts', '.js', '.tsx', '.jsx', '.html'文件,然后和你assets/images下面的所有图片对比路径。 如果没有匹配上的话就说明当前图片没有在项目中用到。下面是代码,在你的根目录运行node --max-old-space-size=8192 cleanfile.js


//cleanfile.js

import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

// ES 模块中获取 __dirname
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// 配置路径
const IMAGES_DIR = path.join(__dirname, 'src/assets/images');
const SRC_DIR = path.join(__dirname, 'src');
const EXTENSIONS_TO_SCAN = ['.vue', '.ts', '.js', '.tsx', '.jsx', '.html'];

// 递归获取所有图片文件
function getAllImages(dir, fileList = []) {
  if (!fs.existsSync(dir)) {
    console.log(`⚠️  目录不存在: ${dir}`);
    return fileList;
  }
  
  const files = fs.readdirSync(dir);
  
  files.forEach(file => {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);
    
    if (stat.isDirectory()) {
      getAllImages(filePath, fileList);
    } else if (/\.(png|jpg|jpeg|gif|svg|webp|ico)$/i.test(file)) {
      fileList.push(filePath);
    }
  });
  
  return fileList;
}

// 递归获取所有源代码文件
function getAllSourceFiles(dir, fileList = []) {
  if (!fs.existsSync(dir)) {
    console.log(`⚠️  目录不存在: ${dir}`);
    return fileList;
  }
  
  const files = fs.readdirSync(dir);
  
  files.forEach(file => {
    const filePath = path.join(dir, file);
    
    // 跳过不需要扫描的目录
    if (fs.statSync(filePath).isDirectory()) {
      if (file === 'node_modules' || file === '.git' || file === 'dist' || file === 'build') {
        return;
      }
      getAllSourceFiles(filePath, fileList);
    } else if (EXTENSIONS_TO_SCAN.some(ext => file.endsWith(ext))) {
      fileList.push(filePath);
    }
  });
  
  return fileList;
}

// 检查图片是否被使用
function isImageUsed(imagePath, sourceFiles) {
  const imageFileName = path.basename(imagePath);
  const imageNameWithoutExt = path.basename(imagePath, path.extname(imagePath));
  
  for (const sourceFile of sourceFiles) {
    try {
      const content = fs.readFileSync(sourceFile, 'utf-8');
      
      // 检查多种可能的引用方式
      // 1. 完整文件名
      if (content.includes(imageFileName)) return true;
      
      // 2. 不带扩展名的文件名 (有些构建工具会自动添加扩展名)
      if (content.includes(imageNameWithoutExt)) return true;
      
      // 3. 相对路径
      const relativePath = path.relative(SRC_DIR, imagePath).replace(/\\/g, '/');
      if (content.includes(relativePath)) return true;
      
      // 4. 使用 @ 别名
      if (content.includes(`@/assets/images/${imageFileName}`)) return true;
      if (content.includes(`@/assets/images/${imageNameWithoutExt}`)) return true;
      
      // 5. 检查路径的各个部分
      const pathParts = relativePath.split('/');
      const folder = pathParts[pathParts.length - 2];
      if (folder && content.includes(`${folder}/${imageFileName}`)) return true;
      
    } catch (error) {
      console.error(`读取文件失败: ${sourceFile}`, error.message);
    }
  }
  
  return false;
}

// 主函数
function findUnusedImages() {
  console.log('🔍 开始扫描未使用的图片...\n');
  
  // 检查目录是否存在
  if (!fs.existsSync(IMAGES_DIR)) {
    console.error(`❌ 图片目录不存在: ${IMAGES_DIR}`);
    process.exit(1);
  }
  
  if (!fs.existsSync(SRC_DIR)) {
    console.error(`❌ 源代码目录不存在: ${SRC_DIR}`);
    process.exit(1);
  }
  
  // 获取所有图片和源代码文件
  const imageFiles = getAllImages(IMAGES_DIR);
  const sourceFiles = getAllSourceFiles(SRC_DIR);
  
  console.log(`📊 统计信息:`);
  console.log(`   - 图片目录: ${IMAGES_DIR}`);
  console.log(`   - 图片总数: ${imageFiles.length}`);
  console.log(`   - 源代码文件数: ${sourceFiles.length}\n`);
  
  if (imageFiles.length === 0) {
    console.log('⚠️  没有找到任何图片文件');
    return;
  }
  
  const unusedImages = [];
  const usedImages = [];
  
  console.log('⏳ 正在分析图片使用情况...\n');
  
  imageFiles.forEach((imagePath, index) => {
    const fileName = path.basename(imagePath);
    const isUsed = isImageUsed(imagePath, sourceFiles);
    
    if (isUsed) {
      usedImages.push(imagePath);
      console.log(`✓ [${index + 1}/${imageFiles.length}] ${fileName} - 使用中`);
    } else {
      unusedImages.push(imagePath);
      console.log(`✗ [${index + 1}/${imageFiles.length}] ${fileName} - 未使用`);
    }
  });
  
  // 输出结果
  console.log('\n' + '='.repeat(60));
  console.log(`\n📈 扫描完成!`);
  console.log(`   ✅ 使用中的图片: ${usedImages.length} 个`);
  console.log(`   ❌ 未使用的图片: ${unusedImages.length} 个`);
  console.log(`   📦 可节省空间: ${calculateSize(unusedImages)}\n`);
  
  if (unusedImages.length > 0) {
    console.log('📋 未使用的图片详细列表:\n');
    
    // 按文件夹分组
    const groupedImages = groupByFolder(unusedImages);
    
    Object.keys(groupedImages).forEach(folder => {
      console.log(`\n📁 ${folder}:`);
      groupedImages[folder].forEach((img, index) => {
        const size = fs.statSync(img).size;
        console.log(`   ${index + 1}. ${path.basename(img)} (${formatSize(size)})`);
      });
    });
    
    // 生成删除脚本
    const deleteScriptPath = path.join(__dirname, 'delete-unused-images.bat');
    const deleteScript = unusedImages.map(img => `del "${img}"`).join('\n');
    fs.writeFileSync(deleteScriptPath, deleteScript);
    
    // 生成备份脚本
    const backupScriptPath = path.join(__dirname, 'backup-unused-images.bat');
    const backupDir = path.join(__dirname, 'unused-images-backup');
    const backupScript = 
      `@echo off\n` +
      `mkdir "${backupDir}" 2>nul\n\n` +
      unusedImages.map((img, i) => {
        const destDir = path.dirname(img.replace(IMAGES_DIR, backupDir));
        return `mkdir "${destDir}" 2>nul\nmove "${img}" "${destDir}\\"\n`;
      }).join('');
    fs.writeFileSync(backupScriptPath, backupScript);
    
    // 保存报告
    const reportPath = path.join(__dirname, 'unused-images-report.txt');
    const report = 
      `未使用的图片报告\n` +
      `生成时间: ${new Date().toLocaleString()}\n` +
      `图片总数: ${imageFiles.length}\n` +
      `使用中: ${usedImages.length}\n` +
      `未使用: ${unusedImages.length}\n` +
      `可节省空间: ${calculateSize(unusedImages)}\n\n` +
      `未使用的图片列表:\n` +
      `${'-'.repeat(60)}\n` +
      unusedImages.map((img, i) => `${i + 1}. ${img}`).join('\n');
    
    fs.writeFileSync(reportPath, report, 'utf-8');
    
    console.log('\n' + '='.repeat(60));
    console.log('\n📄 已生成以下文件:');
    console.log(`   1. ${reportPath} - 详细报告`);
    console.log(`   2. ${backupScriptPath} - 备份脚本(推荐先执行)`);
    console.log(`   3. ${deleteScriptPath} - 删除脚本\n`);
    console.log('💡 建议操作步骤:');
    console.log('   1. 先运行 backup-unused-images.bat 备份图片');
    console.log('   2. 测试应用是否正常运行');
    console.log('   3. 确认无误后再运行 delete-unused-images.bat 删除\n');
    
  } else {
    console.log('🎉 太好了! 所有图片都在使用中,没有需要清理的文件。\n');
  }
}

// 按文件夹分组
function groupByFolder(files) {
  const groups = {};
  files.forEach(file => {
    const folder = path.dirname(file);
    if (!groups[folder]) {
      groups[folder] = [];
    }
    groups[folder].push(file);
  });
  return groups;
}

// 计算文件大小
function calculateSize(files) {
  let totalSize = 0;
  files.forEach(file => {
    totalSize += fs.statSync(file).size;
  });
  return formatSize(totalSize);
}

// 格式化文件大小
function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}

// 运行   node --max-old-space-size=8192 cleanfile.js
try {
  findUnusedImages();
} catch (error) {
  console.error('❌ 错误:', error.message);
  console.error(error.stack);
  process.exit(1);
}
  1. 代码执行完之后会生成一个unused-images-report报告,列出哪些图片没有在项目中用到

image.png

  1. 现在已经知道哪些图片没有用到,接下来删除这些图片就好了。也是node结合js脚本,代码如下。在你的项目根目录中运行 node clean_images.js,运行成功之后就清理掉项目中的多余图片资源了。
// clean_images.js
// 替换顶部的 require() 语句
import fs from 'fs'; // 使用异步版本,并配合 await
import path from 'path';

// --- 待删除的图片文件路径列表 ---
// 请将你的“未使用的图片列表”中的路径粘贴到下面的数组中。
// 注意:路径分隔符在 Windows 和 Node.js/Linux 中可能需要统一。
// 这里的路径已经是 D:\front\workProjects\研发云\zjwxm\... 的形式,
// 在大多数现代 Node.js 环境中(尤其是搭配 path.resolve),可以直接使用。

const unusedImagePaths = [
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\applications\\app_logo10_disabled.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\applications\\app_logo11_disabled.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\applications\\app_logo13_disabled.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\applications\\app_logo14.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\applications\\app_logo14_disabled.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\applications\\app_logo7_disabled.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\applications\\app_logo8_disabled.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\applications\\app_logo9_disabled.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\arrow-left-icon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\bottom_name_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\brain_power.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\city_building.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\construction_contract.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\digital_pipeline.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\drain_water.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\energy_consumption.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\img_bg_reverse.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indexs_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_10.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_12.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_2_old.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_3.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_4.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_60.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_7.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_8.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\applications_9.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\city_construction.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\consigned_building.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\engineering_online.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\engineering_quality.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\go_countryside.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\housing_subsidy.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\indicator_detail_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\low_carbon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\modern_community.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\municipal_demonstration.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\number_pipeline.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\public_housing.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\qualification.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\reconnaissance_item.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\reserve_fund.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\tenement.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\town_house.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\track_control.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\two_four.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\two_four_new.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\urban_experience.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\urban_waterlogging.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\indicator\\yuyue_anju.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\low-carbon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\mask_table.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\modern_community.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\name5.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\name_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\project_approval.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\project_num_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\project_quality.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\prospective_design.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\risk_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\river_bank.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\title_text1_old.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\town_house.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\twoRivers.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\typical_application_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\urban_experience.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen\\waterlogging_control.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\allIndexTitle_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\allIndex_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\ball_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\centerIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\centerIcon1.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\centerIcon2.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\centerIcon3.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\centerIcon4.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\center_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\childRunwayTitle_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\decision_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\decision_title.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\eventIcon1.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\eventIcon2.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\eventIcon3.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\eventIcon4.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\eventIcon5.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\eventIcon7.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\eventTitle_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\externalAccessIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\government.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\handled.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\icons_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\icon_arrow_data.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\indexTitle_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\jianzhu.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\juniorIndex_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\leader_assign.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\lotIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\matter_event.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\mesTitle_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\perceived_event.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\plate-service_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\publicRentIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\settleDownIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\signIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen2\\workIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\contentBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\iconFour.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\influenceBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\influenceIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\jianzhu01.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\listIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\progressLine.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\setBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen3\\setIcon.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreen32\\layer_default copy.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\footer_bg_new.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\header_bg_new.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg-num.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg-pie.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg-planNum.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg-title.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg19.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg194.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\BG2.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg3.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg4.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg5.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg_pie.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\bg_smallTown.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\g_0003.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\g_01.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\g_center.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\icon_finished.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\icon_planNum.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\smallTown_line.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\tiaokong.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\left\\数据指标41 (2).png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\777777.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\bgc1.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\bottom22.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\bottom33.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\btm2.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\btmLine.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\center22.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\circle22.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\deveBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\expert.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Group1321321345@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\icon33.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\icon44.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\img66.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\left22.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\left33.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\manageBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\model1.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\model2.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\model3.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\money22.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\oldBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\oldBgc2.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\pieBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\projectBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\projectBtm.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\punctuation.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle2.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle3462408162@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle346240816@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle35351@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle35353@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle3535@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle4346240816@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle44346240816@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\Rectangle53535@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\rightbgc1.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\rightbgc2.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\rightbgc3.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\rightbgc4.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\rightbgc5.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\safeBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\updateList.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标1041@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标4111@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标411@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标41@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标422@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标42@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标43@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标641@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标741@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标841@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\right\\数据指标941@2x.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\warningBgc.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\bigScreenNew\\标题装饰.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\buildingInfo\\room_bg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\disposal\\drawTitle (1).png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\majorProjects\\progressBg-blue.svg',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\majorProjects\\progressBg-yellow.svg',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\majorProjects\\related1.svg',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\majorProjects\\related2.svg',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\majorProjects\\related3.svg',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\majorProjects\\related4.svg',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\map2\\13375720836738076.jpg',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\map2\\new_image.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\map2\\titleBgc1.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\wjf\\fxbg.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\wjf\\housePic.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\wjf\\tex-teble.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\wjf\\xia-la.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\wjf\\zhengce_01.png',
  'D:\\front\\workProjects\\研发云\\zjwxm\\src\\assets\\images\\wjf\\zhengce_02.png'
];

// 使用 async/await 异步处理文件删除
async function deleteUnusedImages() {
  console.log(`\n🚀 开始清理 ${unusedImagePaths.length} 个未使用的图片...`);

  let successCount = 0;
  let failCount = 0;

  for (const relativePath of unusedImagePaths) {
    // 将 Windows 路径转换为系统兼容的路径(尤其是转义)
    const imagePath = path.normalize(relativePath);

    try {
      // 检查文件是否存在,防止删除不存在的文件时报错
      await fs.promises.access(imagePath, fs.constants.F_OK);

      // 删除文件
      await fs.promises.unlink(imagePath);
      console.log(`✅ 已删除: ${imagePath}`);
      successCount++;
    } catch (error) {
      if (error.code === 'ENOENT') {
        console.warn(`⚠️ 文件不存在,跳过: ${imagePath}`);
      } else {
        console.error(`❌ 删除失败: ${imagePath} - 错误: ${error.message}`);
        failCount++;
      }
    }
  }

  // --- 最终报告 ---
  console.log('\n--- 清理完成报告 ---');
  console.log(`总计路径数: ${unusedImagePaths.length}`);
  console.log(`成功删除: ${successCount} 个文件. 🎉`);
  if (failCount > 0) {
    console.log(`失败数量: ${failCount} (请检查错误信息).`);
  }
  if (successCount === unusedImagePaths.length) {
    console.log('✨ 所有文件都已成功处理!项目瘦身成功!');
  }
}

// 执行清理函数
deleteUnusedImages();

总结:其实你npm run build最终打包的大小,只和你文件资源是否引用有直接关系。 你没有引用到的图片资源是不会被打包进去的,即使你放在assets/images下面,但是你的项目中没有引用到,就不会被打包进去。