一键资源地址替换工具 — UniApp发布小程序体积精简

闺蜜圈 小程序版本一直落后很多，之所以没更新主要的问题在于 uni 打包小程序之后体积太大了，体积大一个原因是组件压缩到了 vendor.js 中，一个文件就到了 1.1m（主包限制大小2048kb）。

图片文件也有1m 左右，再加上其他的一些组件，主包的体积到了 4 m 左右。

虽然已经启用了分包，但是没啥效果，包括代码压缩组，所以最后发版的小程序靠的是压缩图片文件。

让 cursor 尝试写了个优化代码出了各种错误，最后决定采用将图片资源直接网络加载的方式来缩减体积，这样1m 的图片资源就不需要打包在本地资源中了。

本地资源文件都是通过 127 的地址来加载的，将资源移动到服务器之后，修改小程序资源地址之后：

此时加载的图片可以看到是从 cdn 加载了，

并且资源包大小已经基本可以忽略不计了

要实现上看的效果也简单，将static 目录上传到服务器，执行修改工具，修改资源路径删除本地资源。对于 tabbar 的图片不能通过网络加载，需要添加到排除列表，hbuilder 发行小程序后执行修改工具。此时基本就 ok 了，2.06mb，缺的那一点稍微弄一下也就解决了。

工具代码：

/**
 * 将打包后产物里的 /static/** 路径替换为 CDN 前缀。
 * 目前是替换为 https://cdn.guimiquan.cn/ 前缀。
 * 使用方法：
 *   1) 先发行构建微信小程序，生成 unpackage/dist/build/mp-weixin 或 unpackage/dist/dev/mp-weixin
 *   2) 执行：node cdn-rewrite.js [--mode=dist|dev] [--remove-static]
 *   3) 在 dist 内搜索或用开发者工具 Network 确认已变成 CDN 域名
 * 
 * 参数说明：
 *   --mode=dist   : 处理生产构建目录 (默认)
 *   --mode=dev    : 处理开发构建目录
 *   --remove-static : 删除本地 static 目录（排除配置的目录和文件）
 * By: obaby
 * Date: 2025-12-12
 * Version: 1.0.0
 * https://oba.by
 * https://h4ck.org.cn
 * ------------------------------------------------------------
 */
const fs = require('fs');
const path = require('path');

// CDN 根路径，末尾带 /
const CDN = 'https://cdn.guimiquan.cn/';

// 路径配置
const DIST_ROOT = path.resolve(__dirname, 'unpackage/dist/build/mp-weixin');
const DEV_ROOT = path.resolve(__dirname, 'unpackage/dist/dev/mp-weixin');

// 处理的文件类型
const ALLOWED_EXTS = new Set(['.js', '.json', '.wxss', '.css', '.wxml', '.html']);
// 跳过的文件（app.json 里的 tabBar iconPath 不允许 http/https）
const SKIP_FILES = new Set(['app.json']);

// 排除删除的目录（相对于 static 目录）
const EXCLUDE_DIRS = [
  'tabbar_icons',  // tab栏图标必须使用本地文件
  // 可以在这里添加更多需要排除的目录
];

// 排除删除的文件（相对于 static 目录，支持 glob 模式或完整路径）
const EXCLUDE_FILES = [
  // 可以在这里添加需要排除的文件，例如：
  // 'tabbar_icons/**/*',
  // 'custom-icon.png',
  'icons/record_love_add.png',
  'icons/calendar_icon_project_start.png',
  'icons/calendar_icon_project_end.png',
  'icons/calendar_icon_project_start_invalid.png',
  'apk_emotion_2.png',
  'apk_emotion_1.png',
  'apk_emotion_38.png',
  'apk_emotion_9.png',
  'apk_emotion_28.png',
];

// 解析命令行参数
function parseArgs() {
  const args = {
    mode: 'dist',  // 默认使用 dist
    removeStatic: false
  };

  process.argv.slice(2).forEach(arg => {
    if (arg.startsWith('--mode=')) {
      const mode = arg.split('=')[1];
      if (mode === 'dist' || mode === 'dev') {
        args.mode = mode;
      } else {
        console.warn(`警告: 未知的模式 "${mode}", 使用默认模式 "dist"`);
      }
    } else if (arg === '--remove-static') {
      args.removeStatic = true;
    }
  });

  return args;
}

// 获取目标根目录
function getTargetRoot(mode) {
  return mode === 'dev' ? DEV_ROOT : DIST_ROOT;
}

function replaceInFile(file, targetRoot) {
  const source = fs.readFileSync(file, 'utf8');
  let output = source;

  // 处理 JS/JSON 中的字符串形式 "static/xxx" 或 "/static/xxx"
  output = output.replace(/(["'])\/?static\//g, `$1${CDN}static/`);

  // 处理样式中的 url(static/xxx) 或 url('/static/xxx')
  output = output.replace(/url\(\s*(['"]?)\/?static\//g, `url($1${CDN}static/`);

  if (output !== source) {
    fs.writeFileSync(file, output, 'utf8');
    console.log('rewrote', path.relative(targetRoot, file));
  }
}

function walk(dir, targetRoot) {
  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
    const full = path.join(dir, entry.name);
    if (entry.isDirectory()) {
      walk(full, targetRoot);
    } else if (ALLOWED_EXTS.has(path.extname(entry.name)) && !SKIP_FILES.has(entry.name)) {
      replaceInFile(full, targetRoot);
    }
  }
}

// 检查路径是否应该被排除
function shouldExclude(filePath, staticRoot) {
  const relativePath = path.relative(staticRoot, filePath);
  const normalizedPath = relativePath.replace(/\\/g, '/'); // 统一使用 / 分隔符

  // 检查是否在排除目录中
  for (const excludeDir of EXCLUDE_DIRS) {
    if (normalizedPath.startsWith(excludeDir + '/') || normalizedPath === excludeDir) {
      return true;
    }
  }

  // 检查是否匹配排除文件模式
  for (const excludeFile of EXCLUDE_FILES) {
    // 简单的 glob 匹配（支持 * 和 **）
    const pattern = excludeFile.replace(/\*\*/g, '.*').replace(/\*/g, '[^/]*');
    const regex = new RegExp('^' + pattern + '$');
    if (regex.test(normalizedPath)) {
      return true;
    }
    // 精确匹配
    if (normalizedPath === excludeFile) {
      return true;
    }
  }

  return false;
}

// 删除本地 static 目录（排除指定目录和文件）
function removeLocalStatic(targetRoot) {
  const staticDir = path.join(targetRoot, 'static');

  if (!fs.existsSync(staticDir)) {
    console.log('static 目录不存在:', staticDir);
    return;
  }

  let deletedCount = 0;
  let skippedCount = 0;

  function removeRecursive(dir) {
    const entries = fs.readdirSync(dir, { withFileTypes: true });

    for (const entry of entries) {
      const fullPath = path.join(dir, entry.name);

      if (shouldExclude(fullPath, staticDir)) {
        skippedCount++;
        console.log('跳过（排除）:', path.relative(staticDir, fullPath));
        continue;
      }

      if (entry.isDirectory()) {
        removeRecursive(fullPath);
        // 目录为空时才删除
        try {
          fs.rmdirSync(fullPath);
          deletedCount++;
        } catch (err) {
          // 目录不为空，忽略错误
        }
      } else {
        fs.unlinkSync(fullPath);
        deletedCount++;
      }
    }
  }

  removeRecursive(staticDir);

  // 如果 static 目录为空，尝试删除它
  try {
    const remaining = fs.readdirSync(staticDir);
    if (remaining.length === 0) {
      fs.rmdirSync(staticDir);
      console.log('已删除空的 static 目录');
    } else {
      console.log(`static 目录保留，包含 ${remaining.length} 个排除项`);
    }
  } catch (err) {
    // static 目录已被删除或无法访问
  }

  console.log(`删除完成: 已删除 ${deletedCount} 项, 跳过 ${skippedCount} 项`);
}

// 主函数
function main() {
  const args = parseArgs();
  const targetRoot = getTargetRoot(args.mode);

  console.log(`模式: ${args.mode}`);
  console.log(`目标目录: ${targetRoot}`);

  if (!fs.existsSync(targetRoot)) {
    console.error('目标目录不存在:', targetRoot);
    process.exit(1);
  }

  walk(targetRoot, targetRoot);
  console.log('路径替换完成');

  if (args.removeStatic) {
    console.log('\n开始删除本地 static 目录...');
    removeLocalStatic(targetRoot);
  } else {
    console.log('\n提示: 使用 --remove-static 参数可删除本地 static 目录');
  }

  console.log('\n完成');
}

main();

使用方法，放到项目根目录下，打包之后执行：

node cdn-rewrite.js [--mode=dist|dev] [--remove-static]