CommonJs和ES6模块化的区别

1. CommonJs模块的require()是同步加载模块，ES6模块的import命令是异步加载模块

2. CommonJs模块是运行时加载，ES6模块是编译时加载或静态加载

3. CommonJs模块加载有缓存，ES6模块加载没有缓存

4. CommonJs模块输出的是一个值的复制，ES6模块输出的是值的只读引用

5. CommonJs加载的是整个模块，即将所有的方法都加载进来，ES6可以单独加载其中的某个方法

6. CommonJs模块中this指向当前模块，ES6中指向undefined

运行时加载

// CommonJS模块
let { stat, exists, readfile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

编译加载或静态加载

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。

CommonJs和ES6模块化介绍可以看这篇文章