import() 动态导入使用与高级应用

更新: 3/9/2026字数: 0 字 时长: 0 分钟

现代前端开发中，模块化和按需加载是性能优化的关键。 import() 作为 ES Module (ESM) 提供的动态导入方案，在实际项目中应用广泛。本文将带你从基础到高级，全面理解 import() 的用法与原理。

一、什么是 import()

import() 是 ES Module 提供的 动态导入语法，允许在 运行时按需加载模块。

特点：

• 异步执行，返回 Promise
• 支持动态路径或表达式
• 可以按需加载模块、组件、资源
• 常用于懒加载、插件系统、条件模块加载

注意：静态 import 在编译阶段就已确定依赖，属于同步加载；而 import() 在代码运行时才执行，属于异步加载。

二、基础用法

1、动态加载静态资源

动态加载图片或其他资源：

<script setup>
const imgSrc = ref("");

async function loadImg(name) {
  try {
    const module = await import(`@/assets/images/${name}.png`);
    imgSrc.value = module.default || module;
  } catch (err) {
    console.error("Failed to load module:", err);
  }
}

loadImg("sign");
</script>

成功加载后，图片路径会在 default 属性中。

2、按需加载模块或组件

Vue 路由懒加载

const routes = [
  {
    path: "/home",
    component: () => import("@/views/Home.vue")
  }
];

动态组件加载

const MyComponent = await import("@/components/MyTest.vue");

结合 async/await，可以在函数执行中按需加载，提高首屏渲染速度。

3、动态路径与表达式

动态路径允许批量加载模块：

Promise.all(
  Array.from({ length: 10 }, (_, i) => import(`/modules/module-${i}.js`))
).then(modules => {
  modules.forEach(m => m.load());
});

适用于插件系统、自动注册模块等场景。

三、进阶用法

1、解构获取导出成员

动态导入模块后，可直接解构：

const { name, fun, obj, default: myDefault } = await import("./my-module.js");
console.log(name, fun, obj, myDefault);

2、环境条件加载模块

在 SSR 或跨平台项目中，可根据环境加载不同模块：

let myModule;
if (typeof window === "undefined") {
  myModule = await import("module-on-server");
} else {
  myModule = await import("module-in-browser");
}

3、动态加载 JSON 或配置文件

async function loadConfig(env) {
  const config = await import(`./config.${env}.json`);
  return config.default;
}

const config = await loadConfig("production");

四、原理解析

import() 背后的原理：

1. 解析阶段：编译器不会解析动态路径
2. 运行时：JS 引擎根据路径创建网络请求（或读取缓存）
3. Promise 返回：模块加载完成后解析为模块对象
4. 缓存机制：同一模块只会加载一次，后续返回缓存

流程图

五、import() 与其他导入方式对比

特性	import（静态）	require (CJS)	import()（动态）
加载时机	编译阶段	执行阶段	运行时
异步	❌	❌	✅
返回值	模块对象	模块对象	Promise
路径动态	❌	✅	✅
支持解构	✅	✅	✅
Tree-shaking	✅	❌	✅

六、常见坑与优化

1. 路径限制：Vite / Webpack 对动态路径有限制，必须能在编译期解析。
2. 缓存机制：同一模块只会加载一次，避免重复请求。
3. 错误处理：动态导入返回 Promise，必须 catch 错误。
4. SSR 注意事项：服务器端无法访问 window 或 document，需条件加载。
5. 打包优化：结合 Webpack / Vite 的 Code Splitting，减少首屏体积。

七、实战案例

1、Vue 组件动态加载

<script setup>
const compName = ref("MyTest");

async function loadComp(name) {
  const component = await import(`@/components/${name}.vue`);
  return component.default;
}
</script>

2、Node 条件加载

async function loadModule() {
  let mod;
  if (process.env.NODE_ENV === "production") {
    mod = await import("./prod-module.js");
  } else {
    mod = await import("./dev-module.js");
  }
  mod.init();
}

八、总结

import() 是动态模块加载的利器，适合：

• 延迟加载模块/组件
• 条件加载不同环境模块
• 按需加载插件或资源
• 优化首屏渲染性能

⚡ 建议实践：

• Vue / React 路由懒加载 + import()
• Node 跨平台模块加载
• 大型项目的插件或工具模块动态注册