目录
命名导出
特点：
- 一个模块可导出多个值
- 导入时必须使用 相同的名称 或 解构语法
- 支持 Tree Shaking（按需加载优化）
用法示例
导出示例
// mathUtils.js
export const PI = 3.14159; // 直接导出变量
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export { add, subtract }; // 导出已定义的变量
导入示例
import { PI, add, subtract } from './mathUtils.js';
console.log(add(2, 3)); // 5
// 或重命名导入
import { PI as piValue, subtract as sub } from './mathUtils.js';
默认导出（Default Export）
特点
- 每个模块 只能有一个默认导出
- 导入时可 任意命名，无需匹配原名
- 常用于导出模块的“主要功能”
用法示例
导出示例
// Logger.js
export default class Logger {
log(message) {
console.log(`[INFO] ${message}`);
}
}
// 或导出函数
// export default function log(message) { ... }
导入示例
import MyLogger from './Logger.js'; // 名称可自定义
const logger = new MyLogger();
logger.log('Hello'); // [INFO] Hello
混合导出（混合默认和命名导出）
特点
- 同时使用 默认导出 和 命名导出
- 需要分别导入两种类型的导出
用法示例
导出示例
// config.js
export const API_KEY = '123-abc'; // 命名导出
export default { // 默认导出
timeout: 5000,
retry: 3
};
导入示例
import appConfig, { API_KEY } from './config.js';
// appConfig → 默认导出的对象
// API_KEY → 命名导出的变量
console.log(appConfig.timeout); // 5000
console.log(API_KEY); // '123-abc'
重新导出（Re-export）
将其他模块的导出合并到当前模块：
// utils/index.js
export { default as math } from './mathUtils.js'; // 重新导出默认导出并重命名
export * from './stringUtils.js'; // 重新导出所有命名导出
对比
| 特性 | 命名导出 | 默认导出 | 混合导出 |
|---|---|---|---|
| 导出数量 | 多个 | 1个 | 1默认 + 多个命名 |
| 导入语法 | import { x } | import x | 组合语法 |
| 重命名灵活性 | 支持 (as) | 完全自由 | 部分支持 |
| 适用场景 | 工具函数集合 | 单例/主功能类 | 模块包含主功能+配置 |
| Tree Shaking | 支持 | 不支持 | 命名导出部分支持 |
树摇（Tree Shaking）是一项能够显著优化前端应用性能的技术，通过移除未使用的代码，减少了打包文件的体积，提升了页面的加载速度和执行效率。无论是在 Vue 项目还是 Vite 项目中，树摇都能够有效地减少代码冗余，提高代码的可维护性和运行性能。在前端的性能优化中，ES6推出了tree shaking机制，tree shaking就是当我们在项目中引入其他模块时，它会自动将我们没有用到的代码，或者永远不会执行的代码摇掉，在Uglify阶段查出，不打包到bundle中。tree-shaking可以理解为通过工具“摇”我们的JS文件，将其中用不到的代码“摇”掉，是一个性能优化的范畴。
