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"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/76785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java String 常用方法详解

目录 一、获取字符串信息(一)获取字符串长度(二)获取指定索引处的字符(三)获取子字符串二、字符串比较(一)比较字符串内容(二)忽略大小写比较三、字符串转换(一)转换为大写(二)转换为小写四、字符串查找(一)查找子字符串的位置(二)从指定位置开始查找五、字符…

Linux驱动开发练习案例

1 开发目标 1.1 架构图 操作系统:基于Linux5.10.10源码和STM32MP157开发板,完成tf-a(FSBL)、u-boot(SSBL)、uImage、dtbs的裁剪; 驱动层:为每个外设配置DTS并且单独封装外设驱动模块。其中电压ADC测试,采用linux内核…

leetcode-代码随想录-哈希表-赎金信

题目 题目链接:383. 赎金信 - 力扣(LeetCode) 给你两个字符串:ransomNote 和 magazine ,判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以,返回 true ;否则返回 false 。 maga…

精品可编辑PPT | “新基建”在数字化智慧高速公路中的支撑应用方案智慧建筑智慧交通解决方案施工行业解决方案

本文详细阐述了“新基建”在数字化智慧高速公路中的支撑应用方案,从政策背景出发,指出国家在交通领域的一系列发展规划和指导意见,强调了智慧交通建设的重要性。分析了当前高速公路存在的问题,如基础感知设施不足、协同水平低、服…

C语言求3到100之间的素数

一、代码展示 二、运行结果 三、感悟思考 注意: 这个题思路他是一个试除法的一个思路 先进入一个for循环 遍历3到100之间的数字 第二个for循环则是 判断他不是素数 那么就直接退出 这里用break 是素数就打印出来 在第一个for循环内 第二个for循环外

英语—四级CET4考试—蒙猜篇—匹配题

蒙猜方法一 匹配题的做题: 方法一: 首先,什么都不想,把问题中ing形式的,大写字母的,人名,地名,最后几个依次框起来。 然后,比如46题,口里默念meaningful lif…

股票日数据使用_未复权日数据生成前复权日周月季年数据

目录 前置: 准备 代码:数据库交互部分 代码:生成前复权 日、周、月、季、年数据 前置: 1 未复权日数据获取,请查看 https://blog.csdn.net/m0_37967652/article/details/146435589 数据库使用PostgreSQL。更新日…

系统与网络安全------Windows系统安全(6)

资料整理于网络资料、书本资料、AI,仅供个人学习参考。 共享文件夹 发布共享文件夹 Windows共享概述 微软公司推出的网络文件/打印机服务系统 可以将一台主机的资源发布给其他主机共有 共享访问的优点 方便、快捷相比光盘 U盘不易受文件大小限制 可以实现访问…

BN 层的作用, 为什么有这个作用?

BN 层(Batch Normalization)——这是深度神经网络中非常重要的一环,它大大改善了网络的训练速度、稳定性和收敛效果。 🧠 一句话理解 BN 层的作用: Batch Normalization(批归一化)通过标准化每一…

判断HiveQL语句为ALTER TABLE语句的识别函数

写一个C#字符串解析程序代码,逻辑是从前到后一个一个读取字符,遇到匹配空格、Tab和换行符就继续读取下一个字符,遇到大写或小写的字符a,就读取后一个字符并匹配是否为大写或小写的字符l,以此类推,匹配任意字…

基于编程的运输设备管理系统设计(vue+springboot+ssm+mysql8.x)

基于编程的运输设备管理系统设计(vuespringbootssmmysql8.x) 运输设备信息管理系统是一个全面的设备管理平台,旨在优化设备管理流程,提高运输效率。系统提供登录入口,确保只有授权用户可以访问。个人中心让用户可以查…

6.1 python加载win32或者C#的dll的方法

python很方便的可以加载win32的方法以及C#编写的dll中的方法或者变量,大致过程如下。 一.python加载win32的方法,使用win32api 1.安装库win32api pip install win32api 2.加载所需的win32函数并且调用 import win32api win32api.MessageBox(0,"…

前端精度计算:Decimal.js 基本用法与详解

一、Decimal.js 简介 decimal.js 是一个用于任意精度算术运算的 JavaScript 库,它可以完美解决浮点数计算中的精度丢失问题。 官方API文档:Decimal.js 特性: 任意精度计算:支持大数、小数的高精度运算。 链式调用:…

SQL Server 数据库实验报告

​​​​​​​ 1.1 实验题目:索引和数据完整性的使用 1.2 实验目的: (1)掌握SQL Server的资源管理器界面应用; (2)掌握索引的使用; (3)掌握数据完整性的…

AI绘画中的LoRa是什么?

Lora是一个多义词,根据不同的上下文可以指代多种事物。以下将详细介绍几种主要的含义: LoRa技术 LoRa(Long Range Radio)是一种低功耗广域网(LPWAN)无线通信技术,以其远距离、低功耗和低成本的特…

哈希表(Hashtable)核心知识点详解

1. 基本概念 定义:通过键(Key)直接访问值(Value)的数据结构,基于哈希函数将键映射到存储位置。 核心操作: put(key, value):插入键值对 get(key):获取键对应的值 remo…

数据流和重定向

1、数据流 不管正确或错误的数据都是默认输出到屏幕上,所以屏幕是混乱的。所以就需要用数据流重定向将这两 条数据分开。数据流重定向可以将标准输出和标准错误输出分别传送到其他的文件或设备去 标准输入(standard input,简称stdin&#xff…

详解 MySQL 索引的最左前缀匹配原则

MySQL 的最左前缀匹配原则主要是针对复合索引(也称为联合索引)而言的。其核心思想是:只有查询条件中包含索引最左侧(第一列)开始的连续一段列,才能让 MySQL 有效地利用该索引。 一、 复合索引的结构 复合…

MyBatis注解开发增删改查基础篇

本文是MyBatis注解开发的基础篇,将通过实际场景,详细介绍MyBatis注解式开发的使用,这是MyBatis很强大的一个特性,可以直接在接口方法上定义 SQL 语句,从而实现数据库的增删改查操作。 本文目录 一、环境依赖二、创建对…

周末总结(2024/04/05)

工作 人际关系核心实践: 要学会随时回应别人的善意,执行时间控制在5分钟以内 坚持每天早会打招呼 遇到接不住的话题时拉低自己,抬高别人(无阴阳气息) 朋友圈点赞控制在5min以内,职场社交不要放在5min以外 职场的人际关系在面对利…