前言:但我们使用ES module时,webpack就可以进行js Tree-shaking,Tree-shaking是指一个bundler遍历整个依赖树,检查哪个依赖被使用了,并且移除没有被使用的依赖。
例如:
// comments.js
export const render = () => { return 'Rendered!'; };
export const commentRestEndpoint = '/rest/comments';
// index.js
import { render } from './comments.js';
render();
webpack检查到commentRestEndpoint没有被使用,所以不会在包中生成单独的导出点:
// bundle.js (part that corresponds to comments.js)
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
const render = () => { return 'Rendered!'; };
/* harmony export (immutable) */ __webpack_exports__["a"] = render;
const commentRestEndpoint = '/rest/comments';
/* unused harmony export commentRestEndpoint */
})
然后压缩插件会移除没有使用的变量
// bundle.js (part that corresponds to comments.js)
(function(n,e){"use strict";var r=function(){return"Rendered!"};e.b=r})