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

原始的JavaScript代码在正式的服务器上,如果没有举行压缩,混淆,不仅加载速率比力慢,而且还存在安全和性能题目. 因此如今需要举行压缩,混淆处理. 处理方案简单描述一下:
1. 使用 terser 工具举行

安装 terser工具:

1. # npm 安装
2. npm install terser --save-dev
4. # 或使用 yarn 安装
5. yarn add terser --dev

复制代码

---

2. terser工具详解

基本语法：

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

复制代码

例如把 input.js 压缩并输出到 output.min.js：

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

复制代码

---

3. 使用配置文件配置 Terser

Terser 支持将配置项放在单独的配置文件中，便于管理。通常使用一个 JavaScript 文件（如：terser.config.js）举行配置. 我们可以创建一个名为 terser.config.js 的文件, 详细配置如下:

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

复制代码

对于常用的配置项, 详解如下:
compress 压缩选项：
选项名说明推荐值drop_console移除全部console.*语句truedrop_debugger移除全部debugger语句truepasses重复压缩次数，数值越高效果越好2~3unused删除未使用的变量或函数truedead_code删除死代码true mangle 混淆选项：
选项名说明推荐值toplevel混淆顶级函数和变量名trueproperties是否混淆对象属性名false（慎用reserved不被混淆的变量或函数名（保存关键字）按需配置 output 输出选项:
选项名说明推荐值comments是否保存注释falsebeautify是否格式化输出代码false sourceMap 源码映射选项:
用于天生 source map 文件，便于调试
选项名说明filename指定输出js文件名urlsource map 文件的名称

---

4. 运行 Terser 配置文件

使用配置文件举行压缩：

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

复制代码

• –config-file 指定使用的配置文件。
  
• –output 指定输出文件路径。
  

---

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

为了方便管理，建议你在项目的 package.json 中添加一个 npm script：

1. {
2.   "scripts": {
3.     "build:js": "terser src/input.js --config-file terser.config.js --output dist/output.min.js"
4.   }
5. }

复制代码

然后实验:

1. npm run build:js

复制代码

---

4. 与 Webpack 集成使用（可选)

如果你使用的是 webpack 项目，推荐使用 terser-webpack-plugin：
安装插件：

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

复制代码

webpack 配置示例：

1. // webpack.config.js示例
2. const TerserPlugin = require('terser-webpack-plugin');
4. module.exports = {
5.   //...
6.   optimization: {
7.     minimize: true,
8.     minimizer: [
9.       new TerserPlugin({
10.         terserOptions: require('./terser.config.js'),
11.         extractComments: false, // 不生成LICENSE文件
12.       }),
13.     ],
14.   },
15. };

复制代码

7. 调试与常见题目

   

• 如果代码运行出错，通常是因为mangle或compress配置过于激进，如properties:true可能会 粉碎代码。你可以逐步放宽选项排查题目。
  
• 建议始终开启 sourceMap，方便快速定位题目代码。
  

  8. input.js 与 input.mini.js更换

我们天生了input.mini.js之后, 如何更换呢? 固然你可以手动更换,那样可能会比力复杂,而且容出错.我这边直接是使用了自己写的一个脚本
1. update_js_reference.sh

将html代码中的 input.js更换成 input.mini.js, 代码如下:

1. #!/bin/bash
3. # 在所有HTML文件中将main.js引用更改为main-mini.js
4. find  -name "*.html" -type f -exec sed -i '' "s|/static/js/main.js|/static/js/main-mini.js|g" {} \;
6. echo "已将所有HTML文件中的main.js引用更改为main-mini.js"

复制代码

2. restore_js_reference.sh

将html代码中的 input.mini.js复原成input.js, 用于继续开发:

1. #!/bin/bash
3. # 在所有HTML文件中将main-mini.js引用更改回main.js
4. find -name "*.html" -type f -exec sed -i '' "s|/static/js/main-mini.js|/static/js/main.js|g" {} \;
6. echo "已将所有HTML文件中的main-mini.js引用更改回main.js"

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。