import和require区别

1. import

• import命令输入的变量都是只读的
• import命令具有提升效果，会提升到整个模块的头部，首先执行（这种行为的本质是，import命令是编译阶段执行的，在代码运行之前）
• import是静态执行，所以不能使用表达式和变量
• import语句是单例(Singleton)模式（多次用import引入同一个模块时，只会引入一次该模块的实例）

// 静态加载
import BaseLayout from '@/components/Layout/BaseLayout';
export default {
  components: {
    BaseLayout
  }
}

// 动态加载。配合webpack，可以做到分片打包加载
export default {
  components: {
    BaseLayout: () => import(/* webpackChunkName: 'BaseLayout' */ '@/components/Layout/BaseLayout')
  }
}

import()特点

• 特点 1：import() 返回 promise 对象
• 特点 2：相较于 import 命令，import()可以实现动态加载,其路径可以根据情况改变
• 特点 3：import()适用在运行阶段，而不是像 import 一样在编译阶段，这意味着 import(),可以使用在 JS 代码中，比如条件判断，函数中等

import()用法

场景 1：按需加载 import()可以在需要的时候，再加载某个模块。vue 中异步组件的使用，也用到了 import()方法

import { createApp, defineAsyncComponent } from 'vue'
createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})

场景 2：条件加载 import()可以放在 if 代码块，根据不同的情况，加载不同的模块。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

2. require

require是Node内置的用于加载模块文件函数，require函数可以读取并执行一个JavaScript文件，然后返回该模块的exports对象。
module.exports变量（用于导出模块），require函数（用于导入模块）是CommonJS定义了两个主要概念，module.exports属性表示当前模块对外输出的接口，当其他文件通过require函数加载该模块时实际上就是读取module.exports中的变量。
CommonJS实现了Javascript的模块化规范，规范了模块的特性和各模块之间的相互依赖性，使得代码可以更好的编写和维护，同时提高了代码的复用性。

CommonJS 模块的特点如下：

• 所有代码运行在模块作用域，不会污染全局作用域
• 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
• 模块加载的顺序，按照其在代码中出现的顺序

区别	import	require
规范	ES6规范	CommonJs规范（nodejs）
加载方式	编译时加载	运行时加载
位置	可以实现动态加载，理论上可以放在任何位置	用于静态导入，位于文件顶端（不可在条件语句或作用域中使用）
性能	import编译时引入模块的属性说以性能稍高	require运行时才引入模块的属性所以性能相对较低