快捷導(dǎo)航

Javascript代碼壓縮混淆工具terser詳解

更新時(shí)間：2025年05月02日 10:53:25 作者：microhex

本文主要介紹了使用Terser工具對(duì)JavaScript代碼進(jìn)行壓縮和混淆,文中詳細(xì)介紹了Terser工具的使用,具有一定的參考價(jià)值,感興趣的可以了解一下

1. 使用 terser 工具進(jìn)行

安裝 terser工具:

# npm 安裝
npm install terser --save-dev

# 或使用 yarn 安裝
yarn add terser --dev

2. terser工具詳解

基本語(yǔ)法：

terser [input.js] [options] --output output.min.js

例如把 input.js 壓縮并輸出到 output.min.js：

terser input.js --compress --mangle --output output.min.js

3. 使用配置文件配置 Terser

Terser 支持將配置項(xiàng)放在單獨(dú)的配置文件中，便于管理。通常使用一個(gè) JavaScript 文件（如：terser.config.js）進(jìn)行配置. 我們可以創(chuàng)建一個(gè)名為 terser.config.js 的文件, 具體配置如下:

// terser.config.js
module.exports = {
  compress: {
    drop_console: true,   // 去除console.*語(yǔ)句
    drop_debugger: true,  // 去除debugger語(yǔ)句
    passes: 2,            // 多次壓縮迭代，效果更明顯
    unused: true,         // 刪除未使用的代碼
    dead_code: true,      // 刪除無(wú)效的代碼分支
  },
  mangle: {
    toplevel: true,       // 混淆頂級(jí)變量和函數(shù)名
    properties: false,    // 默認(rèn)不混淆屬性名，避免破壞外部接口
  },
  output: {
    comments: false,      // 刪除所有注釋
    beautify: false,      // 不進(jìn)行格式化排版，壓縮為一行
  },
  sourceMap: {
    filename: "output.min.js",
    url: "output.min.js.map"
  }
};

對(duì)于常用的配置項(xiàng), 詳解如下:
compress 壓縮選項(xiàng)：

選項(xiàng)名	說(shuō)明	推薦值
drop_console	移除所有console.*語(yǔ)句	true
drop_debugger	移除所有debugger語(yǔ)句	true
passes	重復(fù)壓縮次數(shù)，數(shù)值越高效果越好	2~3
unused	刪除未使用的變量或函數(shù)	true
dead_code	刪除死代碼	true

mangle 混淆選項(xiàng)：

選項(xiàng)名	說(shuō)明	推薦值
toplevel	混淆頂級(jí)函數(shù)和變量名	true
properties	是否混淆對(duì)象屬性名	false（慎用
reserved	不被混淆的變量或函數(shù)名（保留關(guān)鍵字）	按需配置

output 輸出選項(xiàng):

選項(xiàng)名	說(shuō)明	推薦值
comments	是否保留注釋	false
beautify	是否格式化輸出代碼	false

sourceMap 源碼映射選項(xiàng):
用于生成 source map 文件，便于調(diào)試

選項(xiàng)名	說(shuō)明
filename	指定輸出js文件名
url	source map 文件的名稱

4. 運(yùn)行 Terser 配置文件

使用配置文件進(jìn)行壓縮：

terser input.js --config-file terser.config.js --output output.min.js

–config-file 指定使用的配置文件。
–output 指定輸出文件路徑。

5. 在 npm scripts 中配置（推薦）

為了方便管理，建議你在項(xiàng)目的 package.json 中添加一個(gè) npm script：

{
  "scripts": {
    "build:js": "terser src/input.js --config-file terser.config.js --output dist/output.min.js"
  }
}

然后執(zhí)行:

npm run build:js

4. 與 Webpack 集成使用（可選)

如果你使用的是 webpack 項(xiàng)目，推薦使用 terser-webpack-plugin：

安裝插件：

npm install terser-webpack-plugin --save-dev

webpack 配置示例：

// webpack.config.js示例
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: require('./terser.config.js'),
        extractComments: false, // 不生成LICENSE文件
      }),
    ],
  },
};

7. 調(diào)試與常見(jiàn)問(wèn)題

如果代碼運(yùn)行出錯(cuò)，通常是因?yàn)閙angle或compress配置過(guò)于激進(jìn)，如properties:true可能會(huì) 破壞代碼。你可以逐步放寬選項(xiàng)排查問(wèn)題。

建議始終開(kāi)啟 sourceMap，方便快速定位問(wèn)題代碼。

8. input.js 與 input.mini.js替換

我們生成了input.mini.js之后, 如何替換呢? 當(dāng)然你可以手動(dòng)替換,那樣可能會(huì)比較復(fù)雜,而且容出錯(cuò).我這邊直接是使用了自己寫(xiě)的一個(gè)腳本

1. update_js_reference.sh

將html代碼中的 input.js替換成 input.mini.js, 代碼如下:

#!/bin/bash

# 在所有HTML文件中將main.js引用更改為main-mini.js
find  -name "*.html" -type f -exec sed -i '' "s|/static/js/main.js|/static/js/main-mini.js|g" {} \;

echo "已將所有HTML文件中的main.js引用更改為main-mini.js"

2. restore_js_reference.sh

將html代碼中的 input.mini.js復(fù)原成input.js, 用于繼續(xù)開(kāi)發(fā):

#!/bin/bash

# 在所有HTML文件中將main-mini.js引用更改回main.js
find -name "*.html" -type f -exec sed -i '' "s|/static/js/main-mini.js|/static/js/main.js|g" {} \;

echo "已將所有HTML文件中的main-mini.js引用更改回main.js"

到此這篇關(guān)于Javascript代碼壓縮混淆工具terser詳解的文章就介紹到這了,更多相關(guān)Javascript代碼壓縮混淆terser內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: