- 概念
import 是es6 規范,主要應用于瀏覽器和主流前端框架當中,export 導出, require 是 commonjs 規范,主要應用于nodejs環境中,module.exports 導出 - 編譯規則
import 靜態導入是編譯時解析,動態導入是執行時指定,
require 是執行時指定,不支持動態導入 - 性能
import 支持treeshaking ,去除一些不必要的代碼,相比require,性能更好 - 生態支持
在node14版本將import為默認規范,生態支持規模較大,未來是主流規范 - 用法
require
utils 導出的文件
module.exports = { add: (a, b) => a + b, };
導入
importconst { add } = require('../test/utils');// 使用add(2, 3);
靜態引入
動態導入<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>