Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

不混淆变量名总结 #54

Open
liyatang opened this issue Nov 26, 2018 · 0 comments
Open

不混淆变量名总结 #54

liyatang opened this issue Nov 26, 2018 · 0 comments

Comments

@liyatang
Copy link
Contributor

背景

webpack 生成环境构建的代码一般都是压缩和混淆变量的,但是混淆后的代码很难排查问题。
有 sourcemap,可以通过一些手段对应找出具体错位位置,只是相对麻烦,没有选择这条路

选择了不混淆变量名的方案

假设

不混淆变量名基于以下假设

  • 其实不是所有的变量都会混淆,也许只有一半变量被混淆了而已,具体规则见文末的资料部分
  • gzip使后增大的体积并不可怕

于是尝试了下

config.optimization.minimizer = [
  new UglifyJsPlugin({
    uglifyOptions: {
      mangle: false // Note `mangle.properties` is `false` by default.
    }
  })
]

找了个项目用到的最大的文件做对比
混淆前:源 870kb gzip 218kb
不混淆:源 1.3MB gzip 264kb

仅仅增大了 20%

恩,不碍事,干,为了让大家愉快的跟进Bug,提高代码质量

资料

http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html sourcemap详解
https://github.com/webpack-contrib/uglifyjs-webpack-plugin
https://github.com/mishoo/UglifyJS2
https://github.com/LiPinghai/UglifyJSDocCN uglifyJS 中文文档
http://rapheal.sinaapp.com/2014/05/17/uglifyjs-var-mangle/ 混淆原理
https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/ fundebug利用sourcemap找出位置

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant