webpack优化之使用ES module

前言：但我们使用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})