SWC 代码压缩 #

压缩基础 #

什么是代码压缩？ #

代码压缩是将 JavaScript 代码转换为更小体积的过程，主要包括：

text

┌─────────────────────────────────────────────────────────────┐
│                     代码压缩技术                             │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  压缩（Compression）                                         │
│  ├── 移除空白和注释                                          │
│  ├── 缩短变量名                                              │
│  ├── 优化表达式                                              │
│  └── 内联函数                                                │
│                                                              │
│  混淆（Mangling）                                            │
│  ├── 变量名混淆                                              │
│  ├── 属性名混淆                                              │
│  └── 作用域优化                                              │
│                                                              │
│  优化（Optimization）                                        │
│  ├── 死代码消除                                              │
│  ├── 常量折叠                                                │
│  └── 内联展开                                                │
│                                                              │
└─────────────────────────────────────────────────────────────┘

基本使用 #

json

{
  "minify": true
}

或使用命令行：

bash

swc src -d dist -C minify=true

压缩效果示例 #

javascript

// 输入
function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += item.price * item.quantity;
  }
  return total;
}

const result = calculateTotal([
  { price: 10, quantity: 2 },
  { price: 20, quantity: 1 }
]);

console.log(result);

javascript

// 输出
function calculateTotal(e){let t=0;for(const o of e)t+=o.price*o.quantity;return t}const result=calculateTotal([{price:10,quantity:2},{price:20,quantity:1}]);console.log(result);

压缩配置 #

完整配置结构 #

json

{
  "jsc": {
    "minify": {
      "compress": {
        "defaults": true
      },
      "mangle": {
        "toplevel": false
      },
      "format": {
        "comments": "some"
      }
    }
  },
  "minify": true
}

compress 配置 #

基本压缩选项 #

json

{
  "jsc": {
    "minify": {
      "compress": {
        "defaults": true,
        "arrows": true,
        "arguments": false,
        "booleans": true,
        "collapse_vars": true,
        "comparisons": true,
        "computed_props": true,
        "conditionals": true,
        "dead_code": true,
        "drop_console": false,
        "drop_debugger": true,
        "evaluate": true,
        "hoist_funs": true,
        "hoist_props": true,
        "hoist_vars": false,
        "if_return": true,
        "join_vars": true,
        "keep_classnames": false,
        "keep_fnames": false,
        "loops": true,
        "negate_iife": true,
        "properties": true,
        "reduce_funcs": true,
        "reduce_vars": true,
        "sequences": true,
        "side_effects": true,
        "switches": true,
        "top_retain": [],
        "typeofs": true,
        "unused": true
      }
    }
  }
}

常用压缩选项详解 #

drop_console #

移除 console 语句：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "drop_console": true
      }
    }
  }
}

javascript

// 输入
console.log("debug info");
console.error("error message");
function main() {
  console.log("running");
}

// 输出
function main(){}

drop_debugger #

移除 debugger 语句：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "drop_debugger": true
      }
    }
  }
}

dead_code #

移除死代码：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "dead_code": true
      }
    }
  }
}

javascript

// 输入
function example() {
  if (false) {
    console.log("never executed");
  }
  return "result";
}

// 输出
function example(){return"result"}

unused #

移除未使用的代码：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "unused": true
      }
    }
  }
}

javascript

// 输入
function used() {
  return "used";
}

function unused() {
  return "unused";
}

used();

// 输出
function used(){return"used"}used();

evaluate #

计算常量表达式：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "evaluate": true
      }
    }
  }
}

javascript

// 输入
const result = 1 + 2 + 3;
const message = "Hello" + " " + "World";
const condition = true && false;

// 输出
const result=6,message="Hello World",condition=!1;

conditionals #

优化条件表达式：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "conditionals": true
      }
    }
  }
}

javascript

// 输入
if (true) {
  doSomething();
} else {
  doOther();
}

// 输出
doSomething();

loops #

优化循环：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "loops": true
      }
    }
  }
}

javascript

// 输入
while (true) {
  doSomething();
}

// 输出
for(;;)doSomething();

join_vars #

合并变量声明：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "join_vars": true
      }
    }
  }
}

javascript

// 输入
const a = 1;
const b = 2;
const c = 3;

// 输出
const a=1,b=2,c=3;

collapse_vars #

内联变量：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "collapse_vars": true
      }
    }
  }
}

javascript

// 输入
function example() {
  const temp = compute();
  return temp * 2;
}

// 输出
function example(){return 2*compute()}

keep_classnames #

保留类名：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "keep_classnames": true
      }
    }
  }
}

javascript

// 输入
class MyComponent extends React.Component {
  render() {
    return <div />;
  }
}

// 输出（保留类名）
class MyComponent extends React.Component{render(){return React.createElement("div",null)}}

keep_fnames #

保留函数名：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "keep_fnames": true
      }
    }
  }
}

mangle 配置 #

基本混淆选项 #

json

{
  "jsc": {
    "minify": {
      "mangle": {
        "toplevel": false,
        "keep_classnames": false,
        "keep_fnames": false,
        "keep_private_props": false,
        "ie8": false,
        "safari10": false,
        "properties": {
          "regex": "^_",
          "reserved": []
        }
      }
    }
  }
}

toplevel #

混淆顶层变量：

json

{
  "jsc": {
    "minify": {
      "mangle": {
        "toplevel": true
      }
    }
  }
}

javascript

// 输入
const globalVariable = "value";
function globalFunction() {
  return globalVariable;
}

// 输出
const a="value";function b(){return a}

keep_classnames #

保留类名：

json

{
  "jsc": {
    "minify": {
      "mangle": {
        "keep_classnames": true
      }
    }
  }
}

keep_fnames #

保留函数名：

json

{
  "jsc": {
    "minify": {
      "mangle": {
        "keep_fnames": true
      }
    }
  }
}

properties #

属性名混淆：

json

{
  "jsc": {
    "minify": {
      "mangle": {
        "properties": {
          "regex": "^_",
          "reserved": ["__typename", "__schema"]
        }
      }
    }
  }
}

javascript

// 输入
const obj = {
  _private: "value",
  _internal: "data",
  public: "info"
};

// 输出（只混淆以 _ 开头的属性）
const obj={a:"value",b:"data",public:"info"};

reserved #

保留特定名称：

json

{
  "jsc": {
    "minify": {
      "mangle": {
        "reserved": ["require", "exports", "module", "define"]
      }
    }
  }
}

format 配置 #

json

{
  "jsc": {
    "minify": {
      "format": {
        "comments": "some",
        "ecma": 5,
        "indent_level": 2,
        "preamble": "",
        "quote_style": 0
      }
    }
  }
}

comments #

注释处理：

json

{
  "jsc": {
    "minify": {
      "format": {
        "comments": "some"
      }
    }
  }
}

值	描述
`"all"`	保留所有注释
`"some"`	保留部分注释（如许可证）
`"none"`	移除所有注释

quote_style #

引号风格：

值	描述
`0`	自动选择
`1`	使用单引号
`2`	使用双引号
`3`	使用原始引号

压缩预设 #

开发环境 #

json

{
  "jsc": {
    "minify": {
      "compress": {
        "defaults": false,
        "dead_code": true,
        "unused": true
      },
      "mangle": false
    }
  },
  "minify": false
}

生产环境 #

json

{
  "jsc": {
    "minify": {
      "compress": {
        "defaults": true,
        "drop_console": true,
        "drop_debugger": true,
        "unused": true
      },
      "mangle": {
        "toplevel": true
      }
    }
  },
  "minify": true
}

保留调试信息 #

json

{
  "jsc": {
    "minify": {
      "compress": {
        "defaults": true,
        "keep_classnames": true,
        "keep_fnames": true
      },
      "mangle": {
        "keep_classnames": true,
        "keep_fnames": true
      }
    }
  },
  "minify": true,
  "sourceMaps": true
}

最大压缩 #

json

{
  "jsc": {
    "minify": {
      "compress": {
        "defaults": true,
        "drop_console": true,
        "drop_debugger": true,
        "evaluate": true,
        "unused": true,
        "dead_code": true,
        "conditionals": true,
        "loops": true,
        "collapse_vars": true,
        "reduce_vars": true,
        "sequences": true
      },
      "mangle": {
        "toplevel": true,
        "properties": {
          "regex": "^_"
        }
      }
    }
  },
  "minify": true
}

命令行压缩 #

基本压缩 #

bash

# 启用压缩
swc src -d dist -C minify=true

# 完整压缩配置
swc src -d dist \
  -C minify=true \
  -C jsc.minify.compress.drop_console=true \
  -C jsc.minify.mangle.toplevel=true

生产构建 #

bash

swc src -d dist \
  -C minify=true \
  -C jsc.minify.compress.defaults=true \
  -C jsc.minify.compress.drop_console=true \
  -s

JavaScript API #

压缩字符串 #

javascript

const swc = require('@swc/core');

const result = await swc.minify(sourceCode, {
  compress: {
    drop_console: true,
    drop_debugger: true
  },
  mangle: {
    toplevel: true
  }
});

console.log(result.code);

压缩文件 #

javascript

const swc = require('@swc/core');
const fs = require('fs');

const source = fs.readFileSync('./src/index.js', 'utf-8');

const result = await swc.minify(source, {
  compress: {
    defaults: true
  },
  mangle: true
});

fs.writeFileSync('./dist/index.min.js', result.code);

同步压缩 #

javascript

const swc = require('@swc/core');

const result = swc.minifySync(sourceCode, {
  compress: true,
  mangle: true
});

压缩与 Source Map #

生成 Source Map #

json

{
  "minify": true,
  "sourceMaps": true
}

javascript

const swc = require('@swc/core');

const result = await swc.minify(sourceCode, {
  compress: true,
  mangle: true,
  sourceMap: true
});

console.log(result.code);
console.log(result.map);

内联 Source Map #

json

{
  "minify": true,
  "sourceMaps": "inline"
}

实战示例 #

构建脚本 #

javascript

// build.js
const swc = require('@swc/core');
const fs = require('fs');
const path = require('path');

async function build() {
  const input = fs.readFileSync('./src/index.js', 'utf-8');
  
  const result = await swc.transform(input, {
    jsc: {
      parser: {
        syntax: 'ecmascript',
        jsx: true
      },
      target: 'es2015',
      minify: {
        compress: {
          defaults: true,
          drop_console: true,
          drop_debugger: true
        },
        mangle: {
          toplevel: true
        }
      }
    },
    minify: true,
    sourceMaps: true
  });
  
  fs.writeFileSync('./dist/bundle.min.js', result.code);
  fs.writeFileSync('./dist/bundle.min.js.map', result.map);
  
  console.log('Build complete!');
  console.log(`Original: ${input.length} bytes`);
  console.log(`Minified: ${result.code.length} bytes`);
  console.log(`Saved: ${((1 - result.code.length / input.length) * 100).toFixed(1)}%`);
}

build();

多环境配置 #

javascript

// swc.config.js
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  jsc: {
    parser: {
      syntax: 'typescript',
      tsx: true
    },
    target: 'es2015',
    minify: isProduction ? {
      compress: {
        defaults: true,
        drop_console: isProduction,
        drop_debugger: isProduction
      },
      mangle: {
        toplevel: isProduction
      }
    } : false
  },
  minify: isProduction,
  sourceMaps: true
};

与 Gulp 集成 #

javascript

const gulp = require('gulp');
const swc = require('@swc/core');
const through = require('through2');

function minify() {
  return through.obj(async (file, encoding, callback) => {
    if (file.isBuffer()) {
      const result = await swc.minify(file.contents.toString(), {
        compress: {
          defaults: true,
          drop_console: true
        },
        mangle: true
      });
      
      file.contents = Buffer.from(result.code);
      file.extname = '.min.js';
    }
    
    callback(null, file);
  });
}

gulp.task('minify', () => {
  return gulp.src('src/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('dist'));
});

压缩效果对比 #

示例代码 #

javascript

// 原始代码 (1,234 bytes)
class Calculator {
  constructor(initialValue = 0) {
    this.value = initialValue;
    this.history = [];
  }
  
  add(number) {
    this.value += number;
    this.history.push(`+${number}`);
    return this;
  }
  
  subtract(number) {
    this.value -= number;
    this.history.push(`-${number}`);
    return this;
  }
  
  getResult() {
    console.log(`Current value: ${this.value}`);
    return this.value;
  }
  
  getHistory() {
    console.log('History:', this.history.join(', '));
    return this.history;
  }
}

const calc = new Calculator(10);
calc.add(5).subtract(3);
console.log(calc.getResult());

压缩后 #

javascript

// 压缩后 (287 bytes)
class Calculator{constructor(e=0){this.value=e,this.history=[]}add(e){return this.value+=e,this.history.push(`+${e}`),this}subtract(e){return this.value-=e,this.history.push(`-${e}`),this}getResult(){return console.log(`Current value: ${this.value}`),this.value}getHistory(){return console.log("History:",this.history.join(", ")),this.history}}const calc=new Calculator(10);calc.add(5).subtract(3),console.log(calc.getResult());

压缩率 #

配置	大小	压缩率
原始	1,234 bytes	-
基本压缩	456 bytes	63%
完整压缩	287 bytes	77%
最大压缩	245 bytes	80%

常见问题 #

问题一：压缩后代码报错 #

原因：某些代码依赖特定变量名或属性名

解决方案：

json

{
  "jsc": {
    "minify": {
      "mangle": {
        "reserved": ["requiredVariable"],
        "properties": {
          "reserved": ["requiredProperty"]
        }
      }
    }
  }
}

问题二：React 组件名丢失 #

原因：压缩时移除了类名

解决方案：

json

{
  "jsc": {
    "minify": {
      "compress": {
        "keep_classnames": true
      },
      "mangle": {
        "keep_classnames": true
      }
    }
  }
}

问题三：调试困难 #

解决方案：

json

{
  "minify": true,
  "sourceMaps": true
}

下一步 #

现在你已经掌握了 SWC 的代码压缩功能，接下来学习打包功能了解如何使用 SWC 打包项目！