命名导出用export逐个导出具名声明（如const、function、class），命名导入用{ }精确加载并支持as重命名；仅含命名导出的模块不可默认导入，需显式列出或命名空间导入；配合tree-shaking可剔除未使用项。
JS 中用命名导出（named export）和命名导入（named import）能精准加载模块中特定的函数、变量或类，避免引入整个模块，提升代码可读性和打包体积控制。
怎么写命名导出
在源文件（比如 mathUtils.js）中，用 export 关键字逐个导出声明好的标识符：
- 必须是具名声明（
const、function、class等），不能直接导出表达式或字面量 - 每个导出项需有明确名称，可多次使用
export
示例：
// mathUtils.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export class Calculator {
static multiply(x, y) { return x * y; }
}
怎么用命名导入精确加载
在使用方文件中，用大括号 {} 指定要导入的具体名称，只加载这些内容：
- 导入名必须与导出名完全一致（区分大小写）
- 支持重命名：用
as给导入的标识符起别名，避免命名冲突 - 可混合导入多个项，也可只导入其中一两个
示例：
// main.js
import { add, PI } from './mathUtils.js';
console.log(add(2, 3)); // 5
console.log(PI); // 3.14159
<p>// 重命名导入
import { subtract as minus, Calculator } from './mathUtils.js';
console.log(minus(10, 4)); // 6
console.log(Calculator.multiply(3, 7)); // 21</p>
注意点：不能默认导入命名导出
如果模块只有命名导出，没有 export default，就不能用 import xxx from 'module' 这种默认导入语法：
- 会报错：
Module '"./mathUtils.js"' has no default export - 必须用大括号显式列出所需项，或用命名空间导入（
import * as utils from './mathUtils.js'）
命名空间导入适合动态访问或不确定用哪些项时，但会阻止 tree-shaking，不推荐常规使用。
配合打包工具实现真正“精确加载”
命名导入本身只是语法约定，真正按需加载依赖构建工具（如 Vite、Webpack、Rollup）支持的 tree-shaking：
- 确保使用 ES 模块语法（
.js文件且type="module"或构建配置启用 ESM） - 导出项不能有副作用（例如顶层执行语句），否则可能无法被安全移除
- 生产构建开启压缩和摇树优化后，未被导入的命名导出会被自动剔除
例如：只导入 add，那么 subtract 和 Calculator 就不会被打包进最终产物。
