webpack总结

devtool tree shaking tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。最早由rollup实现。
tree shaking的原理

  • ES6 Module引入进行静态分析,故而编译的时候正确判断到底加载了那些模块
  • 静态分析程序流,判断那些模块和变量未被使用或者引用,进而删除对应代码
// test export const name = 123; export const age = 9999; //index.js import {name, age} from './test.js'; console.log(name);

  • webpack.config.js
const path = require("path"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "bundle.js", path: path.resolve(__dirname, "dist"), }, optimization: { usedExports: false }, devtool: "cheap-source-map" // 为了方便查看编译后的源码 };

编译后:
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "name", function() { return name; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "age", function() { return age; });

optimization.usedExports
告诉webpack为每个模块确定使用的导出
optimization.usedExports改为true。编译后
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return name; }); /* unused harmony export age */

未被使用的export会被标记为/ unused harmony export name /,不会使用__webpack_require__.d进行exports绑定;
// define getter function for harmony exports __webpack_require__.d = function(exports, name, getter) { if(!__webpack_require__.o(exports, name)) { Object.defineProperty(exports, name, { enumerable: true, get: getter }); } };

develop模式开启压缩:
  • minimize: true
    /*! exports provided: name, age */ /*! exports used: name */function(e,t,r){"use strict"; r.d(t,"a",(function(){return n})); const n=123}});

    【webpack总结】可以看到压缩的代码之引入了导出的name
参考资料
  • Tree Shaking原理

    推荐阅读