欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > Javascript代码压缩混淆工具terser详解

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

2025/7/10 15:05:43 来源:https://blog.csdn.net/u013762572/article/details/146915755  浏览:    关键词:Javascript代码压缩混淆工具terser详解

原始的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文件名
urlsource 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. 调试与常见问题
  1. 如果代码运行出错,通常是因为mangle或compress配置过于激进,如properties:true可能会 破坏代码。你可以逐步放宽选项排查问题。
  2. 建议始终开启 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"

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词