Terser为什么不压缩这一段代码，是因为副作用？

上代码：

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

bbbb:

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

Math.js:

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后：

(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前：

(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后：

(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"]
    ]
]);

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

差别就在这里：

来简化一下问题：

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 赶紧修复了这个点！

Terser为什么不压缩这一段代码，是因为副作用？

你可能感兴趣的:(javascript)