关于esmodule的使用与webpack的tree-shaking

• esmodule的使用，看这篇文章就好了：https://es6.ruanyifeng.com/#docs/module#export-%E4%B8%8E-import-%E7%9A%84%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95

其中关键是

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from 'crc32'; // 输入

• 同时，esmodule和commonjs的区别主要有：

1、ES Module 输出的是值的引用，而 CommonJS 输出的是值的拷贝
2、ES Module 是编译时执行，而 CommonJS 模块是在运行时加载

ES Module 最大的特点就是静态化，在编译时就能确定模块的依赖关系，以及输入和输出的值，这意味着什么？意味着模块的依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，正是基于这个基础，才使得 Tree-Shaking 成为可能，这也是为什么 rollup 和 Webpack 2 都要用 ES6 Module 语法才能支持 Tree-Shaking。

• webpack中实现tree-shaking原理
  基于UglifyJS 和es-module的特性，将无用的代码干掉

具体原理可以看这篇： https://juejin.cn/post/6955383260759195678