上代码: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
差异就在这里:
来简化一下问题:
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 赶忙修复了这个点!