cjs 与 esm 区别

1. 模块引入方式

• cjs 引入方式：require
• esm 引入方式：import

2. 模块导出方式

• cjs 导出方式：module.exports
• esm 导出方式：export

3. 模块加载方式

• cjs 加载方式：同步加载
• esm 加载方式：异步加载

4. 模块缓存

• cjs 模块缓存：多次引入只加载一次
• esm 模块缓存：多次引入每次都会加载

5. 模块循环引用

• cjs 模块循环引用：会报错
• esm 模块循环引用：不会报错，会递归加载

6. 模块加载顺序

• cjs 模块加载顺序：先加载后执行
• esm 模块加载顺序：先加载先执行

7.tree shaking

• cjs 没有tree shaing
• esm 有tree shaing

8. 模块热更新

• cjs 没有模块热更新
• esm 有模块热更新

9.顶层this

• cjs 顶层this指向模块本身
• esm 顶层this指向undefined