Terser为何不压缩这一段代码,是由于反作用?

上代码:node

import  * as ute from 'bbbb';
console.log(ute.cube(65,2));
console.log(ute.func1f(89));

bbbb:webpack

export {cube,addX1,addX2,addX3,addX4} from './Math.js';
export {ut_a} from './ut.js';

Math.js:web

export function square(x) {
    return x * x;
}

export function cube(x) {
    return x * x * x* eval('addX3')();
}


export function addX1(x) {
    return x + Math.random() * 1111111111;
}

export function addX2(x) {
    return x + Math.random() * 2222222222;
}

export function addX3(x) {
    return x + Math.random() * 3333333333;
}

export function addX4(x) {
    return x + Math.random() * 45444444444;
}

通过WEBPACK处理后,变成以下:微信

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["zpageATS"],{

/***/ "./node_modules/bbbb/Math.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* unused harmony export square */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cube; });
/* unused harmony export addX1 */
/* unused harmony export addX2 */
/* unused harmony export addX3 */
/* unused harmony export addX4 */
function square(x) {
    return x * x;
}

function cube(x) {
    return x * x * x* eval('addX3')();
}


function addX1(x) {
    return x + Math.random() * 1111111111;
}

function addX2(x) {
    return x + Math.random() * 2222222222;
}

function addX3(x) {
    return x + Math.random() * 3333333333;
}

function addX4(x) {
    return x + Math.random() * 45444444444;
}

/***/ }),

/***/ "./node_modules/bbbb/index.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/*import * as ute from './Math.js';
export {ute};*/






/***/ }),

/***/ "./pageATS.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var bbbb__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./node_modules/bbbb/Math.js");
/* harmony import */ var bbbb__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./node_modules/bbbb/index.js");

console.log(bbbb__WEBPACK_IMPORTED_MODULE_0__[/* cube */ "a"](65,2));
console.log(bbbb__WEBPACK_IMPORTED_MODULE_1__["func1f"](89));


/***/ })

},[["./pageATS.js","pageInit"]]]);

TERSER后:dom

(window.webpackJsonp = window.webpackJsonp || []).push([
    ["zpageATS"], {
        "./node_modules/bbbb/Math.js": function(module, __webpack_exports__, __webpack_require__) {
            "use strict";

            function square(n) {
                return n * n
            }

            function cube(x) {
                return x * x * x * eval("addX3")()
            }

            function addX1(n) {
                return n + 1111111111 * Math.random()
            }

            function addX2(n) {
                return n + 2222222222 * Math.random()
            }

            function addX3(n) {
                return n + 3333333333 * Math.random()
            }

            function addX4(n) {
                return n + 45444444444 * Math.random()
            }
            __webpack_require__.d(__webpack_exports__, "a", (function() {
                return cube
            }))
        },
        "./node_modules/bbbb/index.js": function(n, e, o) {},
        "./pageATS.js": function(n, e, o) {
            "use strict";
            o.r(e);
            var u = o("./node_modules/bbbb/Math.js"),
                a = o("./node_modules/bbbb/index.js");
            console.log(u.a(65, 2)), console.log(a.func1f(89))
        }
    },
    [
        ["./pageATS.js", "pageInit"]
    ]
]);

肉眼可见有代码并无被shaking掉函数

而若是Math.js:换成这个呢?优化

export function square(x) {
    return x * x;
}

export function cube(x) {
    return x * x * x* 67;
}


export function addX1(x) {
    return x + Math.random() * 1111111111;
}

export function addX2(x) {
    return x + Math.random() * 2222222222;
}

export function addX3(x) {
    return x + Math.random() * 3333333333;
}

export function addX4(x) {
    return x + Math.random() * 45444444444;
}

TERSER前:ui

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["zpageATS"],{

/***/ "./node_modules/bbbb/Math.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* unused harmony export square */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cube; });
/* unused harmony export addX1 */
/* unused harmony export addX2 */
/* unused harmony export addX3 */
/* unused harmony export addX4 */
function square(x) {
    return x * x;
}

function cube(x) {
    return x * x * x* 67;
}


function addX1(x) {
    return x + Math.random() * 1111111111;
}

function addX2(x) {
    return x + Math.random() * 2222222222;
}

function addX3(x) {
    return x + Math.random() * 3333333333;
}

function addX4(x) {
    return x + Math.random() * 45444444444;
}

/***/ }),

/***/ "./node_modules/bbbb/index.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/*import * as ute from './Math.js';
export {ute};*/






/***/ }),

/***/ "./pageATS.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var bbbb__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./node_modules/bbbb/Math.js");
/* harmony import */ var bbbb__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./node_modules/bbbb/index.js");

console.log(bbbb__WEBPACK_IMPORTED_MODULE_0__[/* cube */ "a"](65,2));
console.log(bbbb__WEBPACK_IMPORTED_MODULE_1__["func1f"](89));


/***/ })

},[["./pageATS.js","pageInit"]]]);

TERSER后:spa

(window.webpackJsonp = window.webpackJsonp || []).push([
    ["zpageATS"], {
        "./node_modules/bbbb/Math.js": function(n, o, e) {
            "use strict";

            function s(n) {
                return n * n * n * 67
            }
            e.d(o, "a", (function() {
                return s
            }))
        },
        "./node_modules/bbbb/index.js": function(n, o, e) {},
        "./pageATS.js": function(n, o, e) {
            "use strict";
            e.r(o);
            var s = e("./node_modules/bbbb/Math.js"),
                b = e("./node_modules/bbbb/index.js");
            console.log(s.a(65, 2)), console.log(b.func1f(89))
        }
    },
    [
        ["./pageATS.js", "pageInit"]
    ]
]);

可见该移除的都已经被完美移除了,code

差异就在这里:
企业微信截图_15713126839715.png

来简化一下问题:

var t = function(module, __webpack_exports__, __webpack_require__) {
    __webpack_require__.d(__webpack_exports__, "a", function() {
        return cube;
    });    
    function cube(x) {
        return x * x * x;
    }
    function addX1(x) {
        return x + Math.random() * 1111111111;
    }
    function addX2(x) {
        return x + Math.random() * 2222222222;
    }    
};

这个代码被TERSER以后:

var t = function(n, t, r) {
  function u(n) {
    return n * n * n
  }
  r.d(t, "a", (function() {
    return u
  }))
};

看以看到add1 和add2已经被移除了

那么若是是这样呢:

var t = function(module, __webpack_exports__, __webpack_require__) {
    __webpack_require__.d(__webpack_exports__, "a", function() {
        return cube;
    });    
    function cube(x) {
        return x * x * x * addX1(x);
    }
    function addX1(x) {
        return x + Math.random() * 1111111111;
    }
    function addX2(x) {
        return x + Math.random() * 2222222222;
    }    
};

这个代码被TERSER以后:

var t = function(n, t, r) {
  function u(n) {
    return n * n * n * function(n) {
      return n + 1111111111 * Math.random()
    }(n)
  }
  r.d(t, "a", (function() {
    return u
  }))
};

很是的完美,只有addX2被移除了,由于addX1被cube引用了。

特例来了:

var t = function(module, __webpack_exports__, __webpack_require__) {
    __webpack_require__.d(__webpack_exports__, "a", function() {
        return cube;
    });    
    function cube(x) {
        return x * x * x * eval('addX1')(x);
    }
    function addX1(x) {
        return x + Math.random() * 1111111111;
    }
    function addX2(x) {
        return x + Math.random() * 2222222222;
    }    
};

被TERSER压成这样:

var t = function(module, __webpack_exports__, __webpack_require__) {
  function cube(x) {
    return x * x * x * eval("addX1")(x)
  }

  function addX1(_) {
    return _ + 1111111111 * Math.random()
  }

  function addX2(_) {
    return _ + 2222222222 * Math.random()
  }
  __webpack_require__.d(__webpack_exports__, "a", (function() {
    return cube
  }))
};

addX2和addX1都没有被移除,这里和 eval("addX1") 里的字符无关。

初步猜想是terser没法猜想eavl的执行效果,因此不敢轻易删除addX1,addX2

有人说 eval("addX1") 明显能识别出是 addX1, 可是若是是这样呢?

eavl( (Math.random()>0.5 ? 'ad' :'ed')+'ddX1')
eavl( String.fromCharCode(60+Math.pow(,3)) +'X1' )

天哪,这谁知道产生什么?TERSER不肯意,也作不了这个分析,我也作不了,你也作不了,因此干脆 不删除addX1以及addX1。

上面这个道理稍微琢磨如下也能懂,可是奇怪的是这个:

var t = function(module, __webpack_exports__, __webpack_require__) {
    __webpack_require__.d(__webpack_exports__, "a", function() {
        return cube;
    });    
    function cube(x) {
        return x * x * x;
    }
    function addX1(x) {
        return x + Math.random() * 1111111111;
    }
    function addX2(x) {
        return x + Math.random() * 2222222222 * eval("addX5")(x);
    }    
};

addX1,addX2彻底就是一个孤立函数,没有任何调用,可是TERSER以后:

var t = function(module, __webpack_exports__, __webpack_require__) {
  function cube(_) {
    return _ * _ * _
  }

  function addX1(_) {
    return _ + 1111111111 * Math.random()
  }

  function addX2(x) {
    return x + 2222222222 * Math.random() * eval("addX5")(x)
  }
  __webpack_require__.d(__webpack_exports__, "a", (function() {
    return cube
  }))
};

并无被移除,这个点极有多是未来TERSER要作优化的,彻底没有道理。

谁能告诉我缘由?

或则 TERSER 赶忙修复了这个点!

相关文章
相关标签/搜索