import() 是动态导入表达式，返回 Promise，支持变量路径、条件加载和事件触发，解决静态 import 语句无法按需加载的问题；核心用法为 await import('./module.js') 或 .then() 链式调用，适用于路由懒加载、按钮触发、多语言切换等真实场景。
直接上手练，边写边理解，比死记概念快得多。重点不是记住语法，而是清楚“什么时候该用、怎么用稳、出错了怎么查”。
先搞懂它解决什么问题
静态 import 语句必须写在文件最上面，路径得是字符串字面量，不能拼接、不能放 if 里、也不能等用户点了按钮再执行。这导致所有模块一上来就全加载，哪怕有些功能用户根本没点开。
import() 就是来破这个局的：它是个表达式，返回 Promise，路径可以是变量，能放在函数里、条件判断里、事件回调里——真正实现“用到才加载”。
核心写法就两种，必须会写
无论浏览器还是现代 Node.js，都支持：
- 用 async/await（推荐，代码干净）：
const module = await import('./utils.js');
module.doSomething(); - 用 .then()/.catch()（兼容性更广）：
import('./config.js')
.then(m => console.log(m.default))
.catch(err => console.error('加载失败', err));
导出内容怎么取？关键看模块怎么写
假设你导入的是一个同时有默认导出和命名导出的模块：
- 如果模块是 export default function foo() {} + export const bar = 1;：
const { default: foo, bar } = await import('./mod.js'); - 如果只关心默认导出，直接解构 default：
const { default: Component } = await import('./Component.js'); - 如果想全拿过来当命名空间用：
const mod = await import('./mod.js');
mod.default(); mod.helper();
真实场景中怎么落地
别光练 hello world，这几个典型用法要亲手试一遍：
- 按钮触发加载：点击后才 import 图表库，避免首页白屏卡顿
-
路由懒加载：React 中
React.lazy(() => import('./Page'))，Vue 中defineAsyncComponent(() => import('./Comp')) - 多语言切换：根据用户选的语言动态 import('./locales/zh.json')，路径由变量拼接
-
权限控制：管理员才加载
import('./admin-tools.js')，普通用户完全不下载
每试一种，都手动断网或输错路径，看看 catch 能否捕获错误并友好提示——这才是实战能力。
