Javascript代码压缩混淆工具terser详解

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

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

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

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

// terser.config.js
module.exports = {
  compress: {
    drop_console: true,   // 去除console.*语句
    drop_debugger: true,  // 去除debugger语句
    passes: 2,            // 多次压缩迭代，效果更明显
    unused: true,         // 删除未使用的代码
    dead_code: true,      // 删除无效的代码分支
  },
  mangle: {
    toplevel: true,       // 混淆顶级变量和函数名
    properties: false,    // 默认不混淆属性名，避免破坏外部接口
  },
  output: {
    comments: false,      // 删除所有注释
    beautify: false,      // 不进行格式化排版，压缩为一行
  },
  sourceMap: {
    filename: "output.min.js",
    url: "output.min.js.map"
  }
};

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

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

npm run build:js

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

// 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文件
      }),
    ],
  },
};

#!/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"

#!/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"