webpack之tree shaking优化打包体积

前言

大家都知道webpack可以使用tree shaking优化webpack打包，但是使用时还是有几个点要注意一下，昨晚上就因为使用babel-loader时候将ES6模块转译成CommonJS类型，导致tree shaking失效。

为什么使用Tree Shaking？

原因是webpack正常打包时候会将代码一股脑的全部打包到一起，这样就使得我们最终打包生成的文件多了许多垃圾，使用Tree Shaking能将那些没有import的方法干掉，从而减小打包体积。

使用Tree Shaking

1、配置webpack.config.js
optimization: {
        usedExports: true
}
2、配置package.json
"sideEffects": false
3、如果有使用babel-loader切记要将presets中modules设置为false，否则会转义CommonJS类型，导致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'

注意点

1、tree shaking只支持ES6模块的导入导出，因此使用babel-labal时候需要将modules设置为false，否则不生效
2、配置package.json的sideEffects，当业务逻辑单纯引用例如css文件时候，需要将其过滤掉，否则使用tree shaking将不会被打包，例如：

sideEffects": [ "*.css"]

没有静态资源的话直接设置为false即可，
3、当model为production时候，默认会配置optimization.usedExports为true，同事会自动压缩，当model为development时候需要手动设置为true。