Vite 环境下的 Javascript 混淆

前言

在使用 Vite 构建时，每当兄弟们有混淆需求时，会异常艰难。因为网上的教程大同小异，好不容易跟着配置搞完发现报错，运行不起来、报错，心累。

今天就给大家介绍一个比较好用的插件： vite-plugin-bundle-obfuscator，为什么说比较好用，而不是最好用。因为它对于小部分人来说，目前还存在一些问题。

统一认知

1. 为什么要使用混淆？

大家可以看下构建后的 js 代码。是不是可读性还是比较高的。为了防止低级 老6 。需要将编译后的代码降低可读性（使用Javascript obfuscator）。增加 老6 们的阅读难度。当然，高级一点的 老6 可能会去让 AI 帮忙解释代码含义。如果有哪个工具好用的话，还请评论区留言，我其实也需要（手动狗头）。

2.混淆有弊端么？

有。虽然前面说到混淆可以防止 老6，保护兄弟们的劳动成果，但是也确确实实存在一些弊端。

至于有哪些弊端，咱们先简单了解一下混淆的原理：使用各种方式使你的代码变得复杂、难看。比如：增加无意义代码，使简单代码复杂化等。

因此：运行时可能会使你的设备，内存、Cpu升高，或者碰到OOM。并且一定程度上增加编译后的文件大小，增长编译的时间。

3.Vite 环境下应该如何混淆？

首先需要确定混淆开始的时机，时机不对可能出现预期之外的结果。这里咱们选择 Rollup 执行后开始进行混淆。因为 Rollup 执行之后，整体的编译流程接近尾声。此时混淆并不会过多干扰原本的流程，结果。

其次需要忽略node_modules的包（无用功）。

插件介绍

Github：vite-plugin-bundle-obfuscator

详细介绍参数，可前往 Github 查看。 欢迎各位巨佬 Star，提建议，讨论。

特性

1. ⚡ 支持Vite项目中的JavaScript混淆。
2. 🚀 多线程支持，以获得更好的性能。
3. ⚙️ 可定制的混淆选项。
4. 🛡️ 自动排除node_modules。
5. 📦 支持node_modules拆分块。

在线体验

✦ Vite - Vanilla ✦ Vite - Vue ✦ Vite - React ✦ Vite - PReact ✦ Vite - lit ✦ Vite - Svelte ✦ Vite - Solid ✦ Vite - Qwik

安装

# 使用npm
npm install vite-plugin-bundle-obfuscator -D

# 使用pnpm
pnpm add vite-plugin-bundle-obfuscator -D

# 使用yarn
yarn add vite-plugin-bundle-obfuscator -D

使用

import { defineConfig } from 'vite';
import vitePluginBundleObfuscator from 'vite-plugin-bundle-obfuscator';

export default defineConfig({
    plugins: [
        vitePluginBundleObfuscator({
            enable: true,
            log: true,
            autoExcludeNodeModules: true,
            threadPool: true,
        });
    ]
});

至此配置完成，可以愉快的下班了。简单吧。点个三连 吧。