webpack 通过自动更改所有函数和变量名，使生产环境中的react代码变得模糊不清

d5vmydt9 于 11个月前发布在 Webpack

关注(0)|答案(6)|浏览(202)

是否有任何库可以帮助混淆react构建的生产环境？
类似于：

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

字符串
到

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

型

webpack

来源：https://stackoverflow.com/questions/67617529/obscurify-react-code-in-production-by-automatically-changing-all-the-function-an

6条答案

按热度按时间

ewm0tg9j1#

正确的选择将是Terser。它是可用的沿着与webpack太（terser-webpack-plugin）为ES6+。
uglify-es不再维护，uglify-js不支持ES6+。
您可以参考本文中不同包的基准测试。

赞(0）回复(0）举报 11个月前

pexxcrt22#

this library是你要找的吗？

赞(0）回复(0）举报 11个月前

nbewdwxp3#

补充Ashwin R's响应... *

如前所述，Terser是一个很好的选择。
React使用某种形式的UglifyJS来缩小构建时的代码，但为了混淆变量和函数名，我做了以下操作：

说明：

1° -安装Terser
第一个月
2° -修改package.json：

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

字符串
这似乎对我很有效，希望对你也一样！

赞(0）回复(0）举报 11个月前

uplii1fm4#

你有没有试过this包？这是一个非常专业的包，用于混淆js代码，转换你的代码：

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

字符串
对此：

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

型

赞(0）回复(0）举报 11个月前

gev0vcfq5#

UglifyJS有选项来mangle（obscurify）名称：

输入示例：

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

字符串

输出示例：

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

型
自己试试：https://www.uglifyjs.net/
除非包含函数定义，否则useMyfunc不能被mangled（否则函数调用将失败）。类似地，mangled顶级全局变量（如MyComp）可能会破坏使用该组件的任何内容。
如果在mangling之前将所有React代码捆绑到一个文件中，它应该可以工作，因为所有引用都将被mangled为正确匹配的名称。
React已经使用了像UglifyJS这样的minifier，所以你可以只修改一些配置文件。注意source maps will undermine any mangling, so they should be disabled。（我认为React对更小的JS文件更感兴趣，而不是隐藏代码。）