webapck tree shaking
这里引用官方的一句话来总结tree shaking
tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。
我们的文件中总会引入各种依赖或者公共方法,例如:定一个一个utils文件,里面放了add,minus两个方法,但是我们的index.js只需引入add方法,而不希望也把minus也打包进来,这时我们就用到了tree shaking。
src/math.js
export const add = (a, b) => {
console.log(a + b);
}
export const minus = (a, b) => {
console.log(a - b)
}
src/index.js
import { add } from './math.js'
function component() {
var element = document.createElement('div');
element.innerHTML = [
'Hello webpack!',
'5 + 6 is sum to ' + add(5, 6)
].join('\n\n');
return element;
}
document.body.appendChild(component());
// 为做tree shaking 的打包输出
Asset Size Chunks Chunk Names
index.html 323 bytes [emitted]
main.js 121 KiB main [emitted] main
// 编译产出
/***/ "./src/math.js":
/*!*********************!*\
!*** ./src/math.js ***!
\*********************/
/*! exports provided: add, minus */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minus", function() { return minus; });
var add = function add(a, b) {
console.log(a + b);
};
var minus = function minus(a, b) {
console.log(a - b);
};
从编译产出可以看出来,add 和 minus方法都打包输出了,而在index.js中并没有引入minuns方法,所以,在用tree shaking之后,在来看编译产出
/***/ "./src/math.js":
/*!*********************!*\
!*** ./src/math.js ***!
\*********************/
/*! exports provided: add, minus */
/*! exports used: add */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return add; });
/* unused harmony export minus */
var add = function add(a, b) {
console.log(a + b);
};
var minus = function minus(a, b) {
console.log(a - b);
};
虽然minus还在,但是并没有输出,在index.js中只引入了add方法;如果要想把minus也剔除掉,我们需要这样做
- 将文件标记为 side-effect-free
// package.josn
"name": "webpack",
"sideEffects": false,
- 压缩,在webpack中,把mode改为productin可以自动压缩
!function(e) {
var n = {};
function t(r) {
if (n[r])
return n[r].exports;
var o = n[r] = {
i: r,
l: !1,
exports: {}
};
return e[r].call(o.exports, o, o.exports, t),
o.l = !0,
o.exports
}
t.m = e,
t.c = n,
t.d = function(e, n, r) {
t.o(e, n) || Object.defineProperty(e, n, {
enumerable: !0,
get: r
})
}
,
t.r = function(e) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
value: "Module"
}),
Object.defineProperty(e, "__esModule", {
value: !0
})
}
,
t.t = function(e, n) {
if (1 & n && (e = t(e)),
8 & n)
return e;
if (4 & n && "object" == typeof e && e && e.__esModule)
return e;
var r = Object.create(null);
if (t.r(r),
Object.defineProperty(r, "default", {
enumerable: !0,
value: e
}),
2 & n && "string" != typeof e)
for (var o in e)
t.d(r, o, function(n) {
return e[n]
}
.bind(null, o));
return r
}
,
t.n = function(e) {
var n = e && e.__esModule ? function() {
return e.default
}
: function() {
return e
}
;
return t.d(n, "a", n),
n
}
,
t.o = function(e, n) {
return Object.prototype.hasOwnProperty.call(e, n)
}
,
t.p = "",
t(t.s = 0)
}([function(e, n, t) {
"use strict";
t.r(n);
var r, o = function(e, n) {
console.log(e + n)
};
document.body.appendChild(((r = document.createElement("div")).innerHTML = ["Hello webpack!", "5 cubed is equal to " + o(5, 6)].join("\n\n"),
r))
}
]);
//# sourceMappingURL=main.fb027233efe1c3878b2b.js.map
上段代码是我在浏览器中通过sources格式化出来的,可以清楚的看到minus方法被剔除了
webpack中的tree shaking的配置
optimization: {
//识别package.json中的sideEffects以剔除无用的模块,用来做Tree Shaking
usedExports: true,
}