JavaScript ES Modules 导出语句怎么写
在 javascript es modules (esm) 中，导出语句主要通过 export 关键字实现。你可以使用命名导出（named exports）来暴露多个变量、函数或类，也可以使用默认导出（default export）来暴露一个主要对象。具体做法是在定义时直接添加 export 前缀，或者在文件末尾统一导出。命名导出允许模块内部有多个出口，而默认导出每个模块只能有一个。
命名导出与默认导出的区别是什么
命名导出和默认导出的核心区别在于导入时的语法和数量限制。命名导出必须使用与大括号 {} 包裹的解构语法进行导入，且可以存在多个；默认导出则不需要大括号，可以直接指定任意名称导入，但每个模块仅能有一个。这种差异决定了它们在大型项目中的适用场景：命名导出适合工具库或组件集合，默认导出适合单一入口点。
const PI = 3.14159;
function add(a, b) {
return a + b;
}
// 命名导出
export { PI, add };
// 默认导出
export default class Calculator {
static multiply(a, b) {
return a * b;
}
}上述代码展示了如何在同一文件中混合使用两种导出方式。导入方需要使用 import { PI, add } from './math.js' 获取命名导出，使用 import Calculator from './math.js' 获取默认导出。注意命名导出导入时必须保持名称一致，除非使用 as 关键字重命名。
立即学习“Java免费学习笔记（深入）”；
动态导入与静态导出的性能影响如何
静态导出是编译时确定的，打包工具如 Webpack 或 Vite 可以在构建阶段分析依赖树并进行优化，如 Tree Shaking 去除未使用的代码。动态导入则通过 import() 函数在运行时加载模块，返回一个 Promise。这种方式适用于按需加载或条件加载，但会增加运行时的网络请求开销。静态导出更适合核心逻辑，动态导入适合路由懒加载或重型插件。
// 静态导入
import { heavyFunction } from './heavy-module.js';
// 动态导入
async function loadHeavyModule() {
const module = await import('./heavy-module.js');
return module.heavyFunction();
}在实际应用中，如果模块体积较大或使用频率低，建议使用动态导入以减少初始加载时间。静态导出则应确保只导出必要的接口，以便打包工具有效剔除冗余代码。两者结合使用可以平衡构建效率与运行时性能。
