Javascript代码压缩混淆工具terser详解
作者:microhex
原始的JavaScript代码在正式的服务器上,如果没有进行压缩,混淆,不仅加载速度比较慢,而且还存在安全和性能问题. 因此现在需要进行压缩,混淆处理. 处理方案简单描述一下:
1. 使用 terser 工具进行
安装 terser
工具:
# npm 安装 npm install terser --save-dev # 或使用 yarn 安装 yarn add terser --dev
2. terser工具详解
基本语法:
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 支持将配置项放在单独的配置文件中,便于管理。通常使用一个 JavaScript 文件(如:terser.config.js)进行配置. 我们可以创建一个名为 terser.config.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" } };
对于常用的配置项, 详解如下:
compress 压缩选项:
选项名 | 说明 | 推荐值 |
---|---|---|
drop_console | 移除所有console.*语句 | true |
drop_debugger | 移除所有debugger语句 | true |
passes | 重复压缩次数,数值越高效果越好 | 2~3 |
unused | 删除未使用的变量或函数 | true |
dead_code | 删除死代码 | true |
mangle 混淆选项:
选项名 | 说明 | 推荐值 |
---|---|---|
toplevel | 混淆顶级函数和变量名 | true |
properties | 是否混淆对象属性名 | false(慎用 |
reserved | 不被混淆的变量或函数名(保留关键字) | 按需配置 |
output 输出选项:
选项名 | 说明 | 推荐值 |
---|---|---|
comments | 是否保留注释 | false |
beautify | 是否格式化输出代码 | false |
sourceMap 源码映射选项:
用于生成 source map 文件,便于调试
选项名 | 说明 |
---|---|
filename | 指定输出js文件名 |
url | source map 文件的名称 |
4. 运行 Terser 配置文件
使用配置文件进行压缩:
terser input.js --config-file terser.config.js --output output.min.js
- –config-file 指定使用的配置文件。
- –output 指定输出文件路径。
5. 在 npm scripts 中配置(推荐)
为了方便管理,建议你在项目的 package.json 中添加一个 npm script:
{ "scripts": { "build:js": "terser src/input.js --config-file terser.config.js --output dist/output.min.js" } }
然后执行:
npm run build:js
4. 与 Webpack 集成使用(可选)
如果你使用的是 webpack 项目,推荐使用 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. 调试与常见问题
如果代码运行出错,通常是因为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, 代码如下:
#!/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复原成input.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"
到此这篇关于Javascript代码压缩混淆工具terser详解的文章就介绍到这了,更多相关Javascript代码压缩混淆terser内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!