通过自动更改所有函数和变量名称来模糊生产中的反应代码

Question

是否有任何库可以帮助隐藏用于生产的 React 构建？

类似于：

const MyComp = () = > {
 const {propa, propb} = useMyfunc()
 return(...)
}

至

const xyz = () = > {
 const {yxz, zyx} = zzz()
 return(...)
}

Answer 1

this library是您要找的吗？

Answer 2

UglifyJS 具有破坏（模糊）名称的选项：

示例输入：

const MyComp = function() {
const {propa, propb} = useMyfunc()
    return(1)
}

示例输出：

const n=function(){const{propa:n,propb:o}=useMyfunc();return 1};

除非包含函数定义，否则

useMyfunc 不能被破坏（否则函数调用将失败。）类似地，破坏像 MyComp 这样的顶级全局变量可能会破坏任何使用该组件的东西。

如果在重整之前将所有 React 代码捆绑到一个文件中，它应该可以工作，因为所有引用都将被重整为正确匹配的名称。

React 已经使用了像 UglifyJS 这样的压缩器，所以你可以只修改一些配置文件。注意。（我认为 React 对较小的 JS 文件比模糊代码更感兴趣。）

Answer 3

你试过this套餐吗？这是一个非常专业的混淆 js 代码的包，可以转换你的代码：

const MyComp = () = > {
const {propa, propb} = useMyfunc()
return(...)
}

对此：

const MyComp=()=>{const {propa:_0xa95d6e,propb:_0xfaabf6}=useMyfunc();return _0xa95d6e+_0xfaabf6;};

Answer 4

反应混淆

有一个 npm 存储库负责 React 代码混淆。下面是相同的 link - https://www.npmjs.com/package/react-obfuscate

基本步骤写在 repo 文档中。

Jscrambler

另一个我觉得有趣的工具是 Jscrambler。

Answer 5

正确的选择是 Terser. it is availble along with webpack too (terser-webpack-plugin) for ES6+.

uglify-es是no longer maintained并且uglify-js不支持ES6+。

您可以参考此 article 中不同包的基准测试。

Answer 6

补充响应...

如前所述，Terser 是一个不错的选择。

React 使用某种形式的 UglifyJS 来缩小构建时的代码，但为了混淆变量和函数名称，我做了以下操作：

说明：

1° - 安装 Terser

npm install terser

2° - 修改 package.json:

    "terser": "terser ./build/static/js/*.js -c -m --mangle-props regex=/_$/",
    "build": "react-scripts build && npm run terser"

这似乎对我有用；希望它也适合你！

Obscurify react code in production by automatically changing all the function and variable names