# JS代码混淆实例

**Repository Path**: li-limins-miscellaneous-items/example-of-js-code-obfuscation

## Basic Information

- **Project Name**: JS代码混淆实例
- **Description**: 常用的JS代码混淆方案（javascript-obfuscator）
本仓库是把javascript-obfuscator应用到实际的vue3工程中的实例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-31
- **Last Updated**: 2025-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JS代码混淆工具

利用 [javascript-obfuscator](https://github.com/javascript-obfuscator/javascript-obfuscator) 混淆JS代码

本仓库是将其应用到vite的vue3工程的实例

# 用法

1. 安装依赖

```bash
npm install
```

2. 执行打包


```bash
npm run build
```

3. 执行JS混淆

```bash
node obfuscator.js
```

4. 检查结果

```
npm run preview

#浏览器打开 http://127.0.0.1:4173/ ，控制台查看js代码已被混淆，所有字符串、函数名均被打乱
```

# 工程中使用的思路

js的混淆本质上是对单文件进行字符替换的处理方式，所以与打包过程并非强相关（打包过程主要是处理文件之间的引用）

因此它与工程使用的是何种业务技术栈无关（Vue/React）

也有一些贡献者制作了webpack、rollup(vite)的插件，但使用的人不多，主要还是依据自己的项目工程灵活使用

**本仓库提供了一个较为简单的在vue3(vite)中工程上的实现，参见obfuscator.js**

# 要注意的问题

JS混淆后会对体积和内存占用产生一定的影响

以下是本示例工程的情况

|  | 混淆前 | 混淆后 |
| ------ | ------ | ------ |
| 文件大小（两个JS文件） | 75kb | 548kb |
| 内存占用（控制台记录的占用量） | 4.9M | 5.7M |