ES6中import支持按需导入，即只加载实际用到的命名导出成员，提升性能与可读性；语法为import { name } from './module.js'，需导出端使用export声明，导入名须严格匹配，且HTML中script须设type="module"。
ES6 中的 import 支持按需引入，即只加载当前模块实际用到的导出成员，不加载整个模块，提升性能和可读性。关键在于：导出端必须使用命名导出（export），导入端用大括号精确指定名称。
基础按需导入语法
适用于模块中使用 export 显式导出多个变量、函数或类的情况：
-
单个成员：
import { foo } from './utils.js'; -
多个成员：
import { foo, bar, baz } from './utils.js'; -
导入时重命名（避免冲突）：
import { foo as myFoo, bar as myBar } from './utils.js';
命名导出是前提
按需导入依赖对方模块正确使用命名导出，例如：
- ✅ 正确（每个
export独立声明）：export const PI = 3.14;、export function add(a, b) { return a + b; } - ✅ 正确（批量导出对象）：
const a = 1; const b = 2; export { a, b }; - ❌ 错误（不能直接导出字面量）：
export 42;或export 'hello';
混合导入：默认 + 命名成员
当一个模块同时有 export default 和命名导出时，可一次性引入：
import DefaultComp, { Button, Input } from './ui.js';- 注意顺序无关，但默认导入名不可加花括号，命名导入必须加
常见注意事项
按需导入不是“选着用”，而是静态解析、编译期确定的，因此有几条硬性规则：
- 导入的名称必须与导出的名称**完全一致**（大小写、拼写都不能错）
- 不能导入未被
export的内部变量（即使同名也不行） - 导入绑定是动态的——如果原模块中导出的值后续被修改，所有导入处都能看到更新
- 浏览器中使用时，HTML 的
<script>标签必须带type="module"
