Tree-shaking 文档例子编译后结果和实际不同
everlose opened this issue · 3 comments
everlose commented
遵循webpack中文网 tree-shaking 的文档而来，关于这篇文档我有些疑问，我照着它提供的代码编译时，在 mode 为 development 的情况下，示例里是
dist/bundle.js (around lines 90 - 100)
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
'use strict';
/* unused harmony export square */
/* harmony export (immutable) */ __webpack_exports__['a'] = cube;
function square(x) {
return x * x;
}
function cube(x) {
return x * x * x;
}
});
而我运行的结果是带着 eval 函数的。并且也没有 /* unused harmony export square */ 的标识
/***/ "./src/math.js":
/*!*********************!*\
!*** ./src/math.js ***!
\*********************/
/*! exports provided: square, cube */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"square\", function() { return square; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"cube\", function() { return cube; });\n// import { toPrimitive } from './util';\r\n\r\nfunction square(x) {\r\n return x * x;\r\n}\r\n\r\nfunction cube(x) {\r\n// let val = toPrimitive(x);\r\n return val * val * val;\r\n}\r\n\n\n//# sourceURL=webpack:///./src/math.js?");
/***/ }),
当 mode 为 prodution 时，官网给的例子只是说道会去掉没有引入的 square 函数。但能看到 cube
但是如果仔细观察，则不会看到引入 square 函数，但能看到 cube 函数的混淆破坏版本（
function r(e){return e*e*e}n.a=r）
而我编译的结果他不仅去掉了 square，甚至连整个依赖都被直接合并进了主函数里（注意下文的代码里调用依赖函数的地方直接变成了 val * val * val，牛逼啊）。而这又是怎么回事呢？
.......省略 webpack 基础代码50+行
([
function (e, t, n) {
"use strict";
var r;
n.r(t),
document.body.appendChild(
(((r = document.createElement("pre")).innerHTML = [
"Hello webpack!",
"5 cubed is equal to " + val * val * val,
].join("\n\n")),
r)
);
},
]);
everlose commented
复现的例子我已经传到我的仓库里了：https://github.com/everlose/tree-shaking-demo