菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
382
0

webapck tree shaking

原创
05/13 14:22
阅读数 56830

这里引用官方的一句话来总结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,
}

附:webpack 官方文档tree shaking

发表评论

0/200
382 点赞
0 评论
收藏
为你推荐 换一批