一：概述

在前端开发过程中，我们随处可见import，require方式，拿来就使用，那么，两者有什么区别呢？

二：区别

（一）require

1：定义：是CommonJS模块规范，主要运用于Node环境

2：规则：require 执行时会把导入的模块进行缓存，下次再调用会返回同一个实例

3：执行情况：require默认是同步的，（并非绝对，Webpack中能使用 require.ensure 来进行异步加载模块）

（二）import

1：定义：是Es6模块规范，主要应用于现代浏览器和现代JS开发

2：规则：import默认是静态编译的

3：执行情况：默认同步，有引用提升置顶效果，（通过import（）动态引入是异步的哦，并且是在执行中加载的）

三：用法

（一）require

1：场景：导入模块（也就是三方库），导入本地模块

2：代码：

const os = require('os');

// 使用
os.platform()

module.exports = {
  add: (a, b) => a + b,
};

3：兼容性：Node.js14 之前是默认模块系统。目前的浏览器基本是不原生支持 CommonJS，都是需要通过构建工具（如 Webpack ）转换才行

（二）import

1：场景：静态引入，动态引入

2：代码：

 import test from '@/components/test.vue';
 
 {
  path: '/',
  name: 'test',
  component: () => import('@/components/dutest.vue')
},

<script setup>
 const MyTest = await import('@/components/MyTest.vue');
</script>

3：兼容性：import是ES6规范，并且Node.js在Node.js12开始支持ES6，Node.js14 之后是默认选项。

四：总结

1：import 和 import() 都是 ES6 中用于导入模块的语句，而 require() 则是 Node.js 中用于导入模块的函数

2：使用 import 语句导入模块时，模块会被静态加载，:编译时确定了导入的模块;import() 和 require() 都是动态加载。运行时根据需要加载模块。

3：import 和 import() 语句支持模块的默认导出和命名导出，而 require() 只支持模块的默认导出 (module.exports) 导出

4：import() 是基于 Promise 的异步加载，而 require() 是同步加载模块

五：拓展

（一）import和import()的区别？

1：import 是同步的，import() 是异步的。

2：import 用于在静态环境中导入模块的关键字，它是在代码加载阶段执行的，import() 用于在动态环境中导入模块的函数，它是在运行时执行的。

3：import() 函数返回一个 Promise，可以在 Promise 的 then 方法中使用导入的模块。

（二）理解import语句是静态执行的和require函数是动态执行的？

1：静态执行是指在编译阶段就能够确定其执行结果的代码执行方式，动态执行是指在运行时才能确定其执行结果的代码执行方式。

2：import语句是静态执行的，在编译阶段确定所导入的模块，在运行时快速加载，require函数是动态执行的，在运行时才能够确定所需的模块，需要动态地加载

3：import语句是静态执行的，在代码中不能使用变量或表达式作为模块路径，只能使用字符串字面量。而require函数则可以接受变量或表达式作为模块路径，从而动态地确定所需的模块