浅析前端代码混淆加密如何做（插件webpack-obfuscator、vite插件rollup-plugin-obfuscator）

1、应用背景

　　公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是使用 webpack-obfuscator 插件通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。

2、webpack 相关插件webpack-obfuscator

　　若只想在打包时加密混淆，本地运行时不混淆，可以进行以下的配置：

configureWebpack: (process.env.NODE_ENV === 'production') ? {
    plugins: [
      new JavaScriptObfuscator({
        // ...
      }, [])
    ]
  } : {},

　　高度混淆   -   低性能：性能比没有模糊处理慢 50-100%

　　中等混淆   -   最佳性能：性能比没有模糊处理慢 30-35%

　　低混淆      -   高性能：性能稍微慢于没有混淆

　　各种配置信息可以查看这篇文章介绍：vue项目配置 webpack-obfuscator 进行代码加密混淆

3、vite 插件：rollup-plugin-obfuscator

　　rollup-plugin-obfuscator 是 Rollup 构建工具的一个插件，用于对 JavaScript 代码进行混淆和压缩。它的主要作用是增加 JavaScript 代码的安全性和减小生成文件的大小。

　　原理和工作方式：

（1）代码混淆：插件通过采用各种技巧来混淆 JavaScript 代码，使其变得难以理解和逆向工程。这些技巧包括变量名重命名、函数提取、字符串替换等。例如，它可以将原始代码中的变量名和函数名改为无意义的名称，从而增加代码的复杂性。

（2）代码压缩：除了混淆，插件还可以对代码进行压缩，删除不必要的空格、注释和缩短变量名，以减小生成文件的大小。这有助于加快网页加载速度。

（3）选项配置：插件通常提供了许多选项配置，允许开发者自定义混淆和压缩的程度。这些选项包括设置要保留的函数、排除特定文件或模块等。

　　各种配置信息可以查看这篇文章介绍：Vue项目中Vite以及Webpack代码混淆处理