关于webpack:webpack总结

devtool

tree shaking

tree shaking 是一个术语，通常用于形容移除 JavaScript 上下文中的未援用代码(dead-code)。它依赖于 ES2015 模块零碎中的动态构造个性，例如 import 和 export。最早由rollup实现。

tree shaking的原理

• ES6 Module引入进行动态剖析，故而编译的时候正确判断到底加载了那些模块
• 动态分析程序流，判断那些模块和变量未被应用或者援用，进而删除对应代码

// testexport const name = 123;export const age = 9999;//index.jsimport {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原理