import 和require的区别

1. 概念
   import 是es6 规范，主要应用于浏览器和主流前端框架当中，export 导出， require 是 commonjs 规范，主要应用于nodejs环境中，module.exports 导出
2. 编译规则
   import 静态导入是编译时解析，动态导入是执行时指定,
   require 是执行时指定，不支持动态导入
3. 性能
   import 支持treeshaking ,去除一些不必要的代码，相比require,性能更好
4. 生态支持
   在node14版本将import为默认规范，生态支持规模较大，未来是主流规范
5. 用法
   require
   utils 导出的文件
   module.exports = { add: (a, b) => a + b, };
   导入

     const { add } = require('../test/utils');// 使用add(2, 3);
   

   import
   静态引入

   <script setup>import { ref } from 'vue';import test from '@/components/test.vue';
   </script>
   

   动态导入

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

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