UglifyJS批量处理文件：多项目压缩策略-优快云博客

UglifyJS批量处理文件：多项目压缩策略

【免费下载链接】UglifyJS JavaScript parser / mangler / compressor / beautifier toolkit 项目地址: https://gitcode.com/gh_mirrors/ug/UglifyJS

在现代前端开发中，随着项目规模扩大，JavaScript文件数量激增，手动压缩单个文件不仅效率低下，还容易出现配置不一致的问题。UglifyJS作为一款成熟的JavaScript压缩工具，提供了丰富的批量处理能力，能够帮助开发者轻松应对多项目场景下的代码优化需求。本文将从命令行、配置文件和API三个维度，详细介绍UglifyJS的批量压缩策略，帮助你提升前端构建效率。

一、命令行批量压缩基础

UglifyJS的命令行工具支持同时处理多个输入文件，并通过参数控制压缩行为。最基础的批量处理方式是直接指定多个文件路径：

uglifyjs src/file1.js src/file2.js -o dist/bundle.min.js -c -m

上述命令将src/file1.js和src/file2.js合并压缩后输出到dist/bundle.min.js。其中-c启用代码压缩，-m启用变量名混淆。这种方式适合少量文件的快速处理，但当文件数量众多或需要复杂配置时，就需要更高级的策略。

通配符匹配与目录递归

UglifyJS支持使用shell通配符匹配多个文件，例如处理某个目录下所有.js文件：

uglifyjs src/*.js -o dist/all.min.js -c -m

若需要递归处理子目录中的文件，可以结合find命令使用：

find src -name "*.js" -exec uglifyjs {} + -o dist/bundle.min.js -c -m

这种组合命令能够扫描src目录及其所有子目录下的.js文件，统一进行压缩处理。

多文件分别输出

有时我们需要将多个输入文件分别压缩为对应的输出文件，而非合并为一个。这时可以使用循环结构（以bash为例）：

for file in src/*.js; do
  uglifyjs "$file" -o "dist/$(basename "$file" .js).min.js" -c -m
done

上述脚本会将src目录下的每个.js文件压缩后保存到dist目录，文件名格式为原文件名.min.js。

二、配置文件驱动的批量处理

对于复杂的多项目场景，命令行参数的方式显得不够灵活。UglifyJS支持通过JSON配置文件指定压缩选项，便于版本控制和多项目共享配置。

创建配置文件

在项目根目录创建uglify.config.json：

{
  "compress": {
    "toplevel": true,
    "dead_code": true,
    "drop_console": true
  },
  "mangle": {
    "reserved": ["$", "jQuery"]
  },
  "output": {
    "beautify": false,
    "comments": "some"
  }
}

使用配置文件批量处理

通过--config-file参数指定配置文件，结合通配符处理多个文件：

uglifyjs src/**/*.js --config-file uglify.config.json -o dist/bundle.min.js

多项目共享配置

在包含多个子项目的大型仓库中，可以为每个项目创建独立的配置文件，然后通过脚本批量应用：

# 假设目录结构为 projects/project1, projects/project2
for project in projects/*; do
  if [ -f "$project/uglify.config.json" ]; then
    uglifyjs "$project/src/*.js" --config-file "$project/uglify.config.json" -o "$project/dist/bundle.min.js"
  fi
done

这种方式既能保证各项目配置的独立性，又能通过统一脚本实现批量处理。

三、编程式批量处理（API使用）

对于需要更精细控制的场景，UglifyJS提供了Node.js API，可以通过编写脚本实现高度定制化的批量处理逻辑。

基础API调用

首先确保已安装UglifyJS：

npm install uglify-js --save-dev

然后创建minify-script.js：

const UglifyJS = require('uglify-js');
const fs = require('fs');
const path = require('path');

// 读取目录下所有JS文件
function getJsFiles(dir) {
  return fs.readdirSync(dir)
    .filter(file => path.extname(file) === '.js')
    .map(file => path.join(dir, file));
}

// 批量压缩函数
function batchMinify(inputDir, outputDir, options) {
  // 确保输出目录存在
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }

  const files = getJsFiles(inputDir);
  
  files.forEach(file => {
    const code = fs.readFileSync(file, 'utf8');
    const result = UglifyJS.minify(code, options);
    
    if (result.error) {
      console.error(`压缩错误 ${file}: ${result.error}`);
      return;
    }
    
    const outputFile = path.join(outputDir, `${path.basename(file, '.js')}.min.js`);
    fs.writeFileSync(outputFile, result.code);
    console.log(`已压缩: ${outputFile}`);
  });
}

// 执行批量压缩
batchMinify('src', 'dist', {
  compress: { toplevel: true },
  mangle: true
});

运行脚本：

node minify-script.js

多项目配置管理

对于包含多个子项目的仓库，可以创建配置数组，为每个项目指定输入输出目录和压缩选项：

const projects = [
  {
    input: 'projects/projectA/src',
    output: 'projects/projectA/dist',
    options: { compress: { drop_console: true }, mangle: true }
  },
  {
    input: 'projects/projectB/src',
    output: 'projects/projectB/dist',
    options: { compress: false, mangle: false, output: { beautify: true } }
  }
];

projects.forEach(project => {
  batchMinify(project.input, project.output, project.options);
});

这种方式可以为不同项目应用差异化的压缩策略，同时通过统一脚本进行管理。

高级功能：增量压缩

为避免每次都重新压缩所有文件，可以实现增量压缩逻辑，只处理修改过的文件：

const fs = require('fs');
const path = require('path');
const { minify } = require('uglify-js');
const { statSync, readFileSync, writeFileSync } = fs;

function shouldCompress(inputFile, outputFile) {
  try {
    const inputMtime = statSync(inputFile).mtimeMs;
    const outputMtime = statSync(outputFile).mtimeMs;
    return inputMtime > outputMtime;
  } catch (e) {
    // 输出文件不存在，需要压缩
    return true;
  }
}

// 在batchMinify函数中添加判断
function batchMinify(inputDir, outputDir, options) {
  // ... 省略前面的代码 ...
  
  files.forEach(file => {
    const outputFile = path.join(outputDir, `${path.basename(file, '.js')}.min.js`);
    
    if (!shouldCompress(file, outputFile)) {
      console.log(`跳过未修改文件: ${file}`);
      return;
    }
    
    // ... 执行压缩 ...
  });
}

增量压缩可以显著提升大型项目的构建效率，尤其适合开发过程中的频繁构建场景。

四、实战案例：多项目压缩工作流

下面以一个包含多个前端项目的仓库为例，展示如何结合命令行、配置文件和API实现高效的批量压缩工作流。

项目结构

multi-projects/
├── project1/
│   ├── src/
│   │   ├── a.js
│   │   └── b.js
│   ├── dist/
│   └── uglify.config.json
├── project2/
│   ├── src/
│   │   ├── c.js
│   │   └── d.js
│   ├── dist/
│   └── uglify.config.json
├── shared/
│   ├── src/
│   │   └── utils.js
│   └── dist/
└── scripts/
    └── minify-all.js

统一构建脚本

在scripts/minify-all.js中实现：

const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

// 项目列表
const projects = [
  { name: 'project1', hasConfig: true },
  { name: 'project2', hasConfig: true },
  { name: 'shared', hasConfig: false }
];

projects.forEach(({ name, hasConfig }) => {
  const srcDir = path.join(__dirname, '..', name, 'src');
  const distDir = path.join(__dirname, '..', name, 'dist');
  
  // 确保dist目录存在
  if (!fs.existsSync(distDir)) {
    fs.mkdirSync(distDir, { recursive: true });
  }
  
  let cmd = `uglifyjs ${srcDir}/*.js -o ${distDir}/bundle.min.js`;
  
  // 如果项目有自定义配置文件，则使用配置文件
  if (hasConfig) {
    const configFile = path.join(__dirname, '..', name, 'uglify.config.json');
    cmd += ` --config-file ${configFile}`;
  } else {
    // 否则使用默认配置
    cmd += ' -c -m';
  }
  
  console.log(`正在压缩 ${name}...`);
  execSync(cmd, { stdio: 'inherit' });
});

console.log('所有项目压缩完成！');

配置文件示例（project1/uglify.config.json）

{
  "compress": {
    "toplevel": true,
    "drop_console": true,
    "pure_funcs": ["console.log"]
  },
  "mangle": {
    "reserved": ["React", "ReactDOM"]
  },
  "output": {
    "preamble": "/* 压缩于 " + new Date().toISOString() + " */"
  }
}

执行构建

node scripts/minify-all.js

该脚本会依次处理每个项目，根据是否存在配置文件应用不同的压缩策略，实现了多项目的统一管理和差异化配置。

五、最佳实践与注意事项

1. 配置管理

将通用配置抽取为基础配置文件，通过extend机制（需自行实现）让项目配置继承基础配置，减少重复。
敏感配置（如保留的全局变量）应放在项目级配置文件中，避免提交到公共仓库。

2. 性能优化

对于超大型项目，考虑使用并行处理（如使用Promise.all或p-queue库）。
实现增量构建，只处理修改过的文件。
合理设置压缩选项，在压缩率和构建速度之间取得平衡（如减少compress.passes数量）。

3. 错误处理

在批量处理脚本中添加完善的错误捕获机制，避免单个文件压缩失败导致整个流程中断。
输出详细的日志信息，便于定位问题文件。

4. 版本控制

将压缩配置文件纳入版本控制，确保团队成员使用一致的压缩策略。
压缩后的文件通常不纳入版本控制，应添加到.gitignore。

六、总结

UglifyJS提供了灵活多样的批量处理能力，无论是简单的命令行操作还是复杂的多项目构建，都能找到合适的解决方案。通过命令行工具的通配符和循环结构，可以快速实现基础的批量压缩；利用配置文件可以统一管理压缩选项，便于多项目共享；而通过API编程则能实现高度定制化的构建流程，满足复杂场景的需求。

在实际项目中，建议结合配置文件和自定义脚本来管理多项目压缩策略，既保证了配置的灵活性，又通过统一脚本简化了构建过程。同时，注意实现增量构建和错误处理，提升构建效率和稳定性。

掌握这些批量处理技巧，将帮助你在面对大型前端项目时，更加高效地进行代码优化，提升应用性能。

七、扩展资源

UglifyJS官方文档：README.md
UglifyJS API参考：lib/minify.js
压缩配置示例：test/compress/
命令行选项说明：通过uglifyjs --help查看

【免费下载链接】UglifyJS JavaScript parser / mangler / compressor / beautifier toolkit 项目地址: https://gitcode.com/gh_mirrors/ug/UglifyJS

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考