CommonJs和ESModule的区别及优缺点

说起js，就不得不提及模块化编程，简单来说，模块化就像造汽车一样，有人造轮子，有人早车外壳，最后将各自造好的东西拼到一起组装成汽车，充分体现了分工合作的思想。

模块化的作用

使用模块化是为了将一个很大的代码块按不同的功能点分割成几个小的代码片段，通过暴露出参数、方法给使用者使用，这样可以大大提高项目的开发效率，降低项目维护成本。

CommonJs和ESModule的区别

1. CommonJs是使用module.exports或exports导出，使用require导入；ESModule则是使用export导出，使用import导入。
2. CommonJs中的this指向这个模块本身，而ESModule中this指向undefined。
3. ESModule在编译期间会将所有import提升到顶部，CommonJs不会提升require
4. CommonJs是运行时加载模块，ESModule是在静态编译期间就确定模块的依赖。
5. CommonJs导出的是一个值引用，会对加载结果进行缓存，多次使用require同一个文件，只会加载一次，内部再修改数据，不会同步到外部。ESModule是导出的一个地址引用，内部修改数据会同步到外部。
6. CommonJS加载的是整个模块，将所有的接口全部加载进来，ESModule可以加载全部，也可以单独加载其中的某个接口。

CommonJs的优缺点

优点：

• CommonJs会对加载结果进行缓存，多次调用只会加载一次。
• ESModule在编译期间会将所有import提升到顶部，优先加载资源。

缺点：

• CommonJS是以同步模式加载模块，加载浏览器端页面时会导致大量同步请求出现。

ESModule的优缺点

优点：

• 每个ESModule都是运行在单独的私有作用域中，
• ESModule采用严格模式，避免语法不规范。

缺点：

• ESModule的 script 标签会延迟执行脚本。
• ESModule是es6新特性，老旧版本的浏览器不兼容。