common.js和es6中模块引入的区别？

在JavaScript中，CommonJS 和 ES6（也称为ECMAScript 2015或ES2015）都提供了模块化的功能，但它们之间存在一些关键的差异。以下是它们之间在模块引入方面的主要区别：

CommonJS（例如 Node.js）

同步加载：CommonJS模块是同步加载的，这意味着在加载模块时，会阻塞代码的执行，直到模块加载完成。这是因为它最初是为服务器端设计的，在服务器端，由于I/O操作（如文件读取、数据库查询等）是主要的性能瓶颈，因此同步加载通常不是问题。
require 函数 ：使用 require 函数来引入模块。例如：

|---|-----------------------------|
| | const fs = require('fs'); |
模块导出 ：使用 module.exports 或 exports 对象来导出模块中的函数、对象或变量。

|---|--------------------------------------|
| | module.exports = { |
| | myFunction: function() { |
| | // ... |
| | } |
| | }; |
| | |
| | // 或者 |
| | |
| | exports.myFunction = function() { |
| | // ... |
| | }; |
缓存机制 ：CommonJS模块在第一次加载后会被缓存，因此多次 require 同一个模块会返回相同的对象。

ES6（ECMAScript 2015）

异步加载：ES6模块是异步加载的，这意味着在加载模块时，不会阻塞代码的执行。这是因为它主要是为浏览器设计的，浏览器中的网络请求是异步的，因此异步加载更符合Web开发的需求。
import 和 export 关键字 ：使用 import 关键字来引入模块，使用 export 关键字来导出模块中的函数、对象或变量。

|---|------------------------------------------------|
| | import { myFunction } from './myModule.js'; |
| | |
| | // 或者，导出整个模块 |
| | import * as myModule from './myModule.js'; |
| | |
| | // 导出模块 |
| | export function myFunction() { |
| | // ... |
| | } |
| | |
| | // 或者，导出多个变量或函数 |
| | export const myVar = 'hello'; |
| | export function anotherFunction() { |
| | // ... |
| | } |
静态解析 ：ES6模块的 import 和 export 语句在编译时（静态）解析，这意味着它们不能根据运行时条件动态地改变。这有助于提升性能，因为编译器可以提前确定依赖关系并进行优化。
循环依赖：在CommonJS中，循环依赖可能会导致问题，因为模块可能在完全执行之前就被导出。而在ES6中，循环依赖被处理得更好，因为模块是在完全执行后才被导出的。
作用域：ES6模块有自己的独立作用域，这意味着在模块内部定义的变量和函数不会污染全局作用域。而CommonJS模块实际上是在一个共享的模块作用域中运行的，这可能导致命名冲突。
静态结构：ES6模块是静态的，这意味着在编写代码时就需要确定依赖关系。这使得工具（如Webpack、Rollup等）能够更容易地进行静态分析、优化和代码分割。