关于项目最后JS 代码的混淆工作

Question

当完成一个项目之后，若不给项目JS文档进行混淆工作，那么在网络后台（F12）就可以很轻易的看到JS文档的内容，从而导致一些损失。

所谓混淆，就是不让别人看到我的代码是什么意思。下面是一个以混淆的代码片段

 var u, c, d, h, f = {},
            p = {},
            m = {},
            g = {},
            v = Object.prototype.hasOwnProperty,
            b = [].slice,
            y = /\.js$/;
        d = function (t, e) {
            var i, o = s(t),
                l = o[0];
            return t = o[1], l && (l = n(l, e), i = a(l)), l ? t = i && i.normalize ? i.normalize(t, r(e)) : n(t, e) : (t = n(t, e), o = s(t), l = o[0], t = o[1], l && (i = a(l))), {
                f: l ? l + "!" + t : t,
                n: t,
                pr: l,
                p: i
            }
        }, h = {
            require: function (t) {
                return i(t)
            },
            exports: function (t) {
                var e = f[t];
                return "undefined" != typeof e ? e : f[t] = {}
            },

可以看到，属性名都会写为简单的 a b c d，且格式也会放生变化（这里的代码段已被格式化）

但是混淆之前应该考虑另一个问题

当我们在使用现成的框架进行开发的时候，如 Vue.js , JavaScript 文档在混淆之后，里面的 Vue.Component 可能就会变为字母 a，从而妨碍的 Vue 的使用。

所以我们需要另外创建一个JS文档，来保留框架中的属性，使框架能正常运作。

之前有读者回复建议使用 UglifyJS 工具进行混淆，但是它还是需要自己导入一个包含不需要参与混淆的属性的文件。

那么问题来了，是否有大佬有现成的这类型的文件，里面是 Vue.js 的属性，或是教导我搜寻这类文件的方法

万分感谢！！！

Answer 1

非常感谢大家的回答。经过一段时间的查找，发现并没有现成针对 Vue 的 externs 文件，所以我自己写了一个包含部分 Vue 关键字的 externs 文件，可以满足我的现有需求

Answer 2

混淆应该只会混淆局部变量名 暴露的全局变量和api是不会被混淆的吧

Answer 3

混淆工具会考虑这些问题的，基本类似与重构，混淆工具是直接分析 js 代码和相关的依赖，解析成抽象语法树，然后把抽象语法树的节点替换掉，再重新生产源码。

混淆并不是替换变量名。

用这个工具看看 https://astexplorer.net

现在常用的混淆工具是 https://github.com/mishoo/Ugl...，如果你使用的 vue，那么默认的工具链应该就有混淆工具。webpack 的插件。

Answer 4

说大白话就是，让别人看不了你的源码，搞得乱乱的~ 最近我还在想有没有反编译的工具，即把压缩或编译之后的源码，解译出来。?