JS 中怎么用 import() 动态导入语法按需加载模块-js教程-PHP中文网

import() 是 javascript 动态导入语法，返回 promise，用于运行时按需加载模块；支持字符串路径、模板字面量，不可用纯变量；需 await/.then 处理，常用于懒加载、条件加载及多环境适配。

js 中怎么用 import() 动态导入语法按需加载模块

import() 是 JavaScript 中的动态导入语法，返回一个 Promise，用于在运行时按需加载模块，适合实现代码分割、路由懒加载、条件加载等场景。

基本用法：调用 import() 加载模块

与静态 import 不同，import() 是函数调用，参数为模块路径（字符串），支持变量和表达式：

路径必须是字符串字面量或可静态分析的表达式（如模板字符串拼接固定前缀）
不能使用纯变量（如 import(moduleName)），否则打包工具无法分析依赖
返回 Promise，需用 await 或 .then() 处理结果

示例：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

async function loadUtils() {
  const utils = await import('./utils.js');
  utils.doSomething();
}

配合路由或交互事件做懒加载

常见于单页应用中，点击按钮或进入某路由时才加载对应模块：

React 中常配合 React.lazy 和 Suspense 使用（内部即基于 import()）
Vue 中 defineAsyncComponent 也基于它
原生 JS 可直接绑定事件：

document.getElementById('load-chart').addEventListener('click', async () => {
  const { renderChart } = await import('./chart-renderer.js');
  renderChart();
});

加载不同环境或条件模块

根据运行时条件选择加载不同实现，比如按浏览器特性或用户权限：

避免打包进所有环境的代码，减小初始体积
注意路径必须能被构建工具识别（如 Webpack/Vite 支持 import(`./locales/${lang}.js`) 这类简单模板）

async function loadLocale(lang) {
  try {
    const mod = await import(`./locales/${lang}.js`);
    return mod.default;
  } catch (err) {
    // 回退到默认语言
    const mod = await import('./locales/zh.js');
    return mod.default;
  }
}