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}});
能够看到压缩的代码之引入了导出的
name
参考资料
- Tree Shaking 原理