前言
大家都知道webpack可以使用tree shaking優(yōu)化webpack打包蕉世，但是使用時(shí)還是有幾個(gè)點(diǎn)要注意一下，昨晚上就因?yàn)槭褂胋abel-loader時(shí)候?qū)S6模塊轉(zhuǎn)譯成CommonJS類(lèi)型旧蛾，導(dǎo)致tree shaking失效丁鹉。
為什么使用Tree Shaking？
原因是webpack正常打包時(shí)候會(huì)將代碼一股腦的全部打包到一起隐锭，這樣就使得我們最終打包生成的文件多了許多垃圾渐扮，使用Tree Shaking能將那些沒(méi)有import的方法干掉论悴，從而減小打包體積。
使用Tree Shaking
1墓律、配置webpack.config.js
optimization: {
usedExports: true
}
2膀估、配置package.json
"sideEffects": false
3、如果有使用babel-loader切記要將presets中modules設(shè)置為false耻讽，否則會(huì)轉(zhuǎn)義CommonJS類(lèi)型玖像，導(dǎo)致tree shaking失效
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env',{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
},
'useBuiltIns':'usage',
"modules": false
}]],
}
}
}
4、生效的main.js
/*! exports provided: square, cube, default */
/*! exports used: cube */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("/* unused harmony export square */\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"a\", function() { return cube; });\nfunction square(x) {\n console.log('square');\n return x * x;\n}\nfunction cube(x) {\n console.log('cube');\n return x * x * x;\n}\n/* unused harmony default export */ var _unused_webpack_default_export = ({\n square,\n cube\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvbWF0aC5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9tYXRoLmpzP2M0MGYiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGZ1bmN0aW9uIHNxdWFyZSh4KSB7XG4gIGNvbnNvbGUubG9nKCdzcXVhcmUnKTtcbiAgcmV0dXJuIHggKiB4O1xufVxuZXhwb3J0IGZ1bmN0aW9uIGN1YmUoeCkge1xuICBjb25zb2xlLmxvZygnY3ViZScpO1xuICByZXR1cm4geCAqIHggKiB4O1xufVxuZXhwb3J0IGRlZmF1bHQge1xuICBzcXVhcmUsXG4gIGN1YmVcbn07Il0sIm1hcHBpbmdzIjoiQUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/math.js\n");
/***/ })
5齐饮、修改mode為production并打包
mode:'production'
注意點(diǎn)
1捐寥、tree shaking只支持ES6模塊的導(dǎo)入導(dǎo)出，因此使用babel-labal時(shí)候需要將modules設(shè)置為false祖驱，否則不生效
2握恳、配置package.json的sideEffects，當(dāng)業(yè)務(wù)邏輯單純引用例如css文件時(shí)候捺僻，需要將其過(guò)濾掉乡洼，否則使用tree shaking將不會(huì)被打包，例如：
sideEffects": [ "*.css"]
沒(méi)有靜態(tài)資源的話直接設(shè)置為false即可匕坯，
3束昵、當(dāng)model為production時(shí)候，默認(rèn)會(huì)配置optimization.usedExports為true，同事會(huì)自動(dòng)壓縮，當(dāng)model為development時(shí)候需要手動(dòng)設(shè)置為true击儡。
