一、UglifyJS是什么？

UglifyJS是一個強大的JavaScript壓縮和混淆工具，它能夠：

• 壓縮JavaScript代碼，減少文件大小
• 優(yōu)化代碼性能
• 保護代碼不被輕易閱讀（混淆）
• 檢測JavaScript語法錯誤

UglifyJS廣泛應(yīng)用于生產(chǎn)環(huán)境中的前端項目，是構(gòu)建工具（如Webpack、Gulp）的重要組成部分。

二、基本使用方法

1. 安裝UglifyJS

npm install uglify-js -g

2. 命令行壓縮

uglifyjs input.js -o output.js

3. 基本選項

• -c：啟用壓縮
• -m：啟用混淆
• -o：指定輸出文件

示例：

uglifyjs input.js -c -m -o output.js

三、配置選項詳解

當(dāng)配置項增多時，使用配置文件會更方便管理。創(chuàng)建一個 uglify.config.json 文件，使用如下命令執(zhí)行

uglifyjs input.js -o output.js  --config-file uglify.config.json

1. 壓縮選項

{
  "compress": {
    "drop_console": true,
    "dead_code": true,
    "unused": true
  }
}

• drop_console: 刪除console語句
• dead_code: 刪除未使用的代碼
• unused: 刪除未使用的變量

2. 混淆選項

{
   "mangle": {
        "toplevel": true, 
        "eval": true, 
        "keep_fnames": false
  }
}

• toplevel: 混淆頂層變量
• eval: 混淆eval中的變量
• keep_fnames: 不保留函數(shù)名

3. 輸出格式

{
   "output": {
    "beautify": true,
    "comments": false
  }
}

• beautify: 美化輸出
• comments: 不保留注釋

四、高級用法

你也可以在Node.js項目中使用UglifyJS的API。以下是一個簡單的模板：

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

const code = fs.readFileSync('demo.js', 'utf-8');

const result = UglifyJS.minify(code, {
    compress: {
        drop_console: true, // 刪除console.log
    },
    mangle: true, // 啟用混淆
    output: {
        beautify: false, // 不美化輸出
        comments: false, // 不保留注釋
    },
});

fs.writeFileSync('app-minified.js', result.code);

1. 保留特定代碼

{
    compress: {
        drop_console: true,
        dead_code: true
    },
    mangle: {
        toplevel: true
    },
    output: {
        comments: function(node, comment) {
            // 保留特定注釋
            if (comment.value.indexOf('Some') >= 0) {
                return true;
            }
        }
    }
}

2. 處理特定函數(shù)

{
    mangle: {
        reserved: ['mySpecialFunction'] // 保留特定函數(shù)名
    }
}

3. 性能優(yōu)化

{
    compress: {
        sequences: true,    // 合并多個語句
        properties: true,   // 優(yōu)化屬性訪問
        booleans: true,     // 優(yōu)化布爾表達式
        if_return: true,    // 優(yōu)化if/return
        join_vars: true     // 合并變量聲明
    }
}

五、總結(jié)

UglifyJS是一個強大的工具，但使用時需要注意：

1. 合理配置壓縮選項
2. 保留必要的代碼
3. 測試壓縮后的代碼
4. 考慮性能影響