模块化：import 和 export 的优化写法

ES6 (ECMAScript 2015) 引入了原生的模块系统，彻底改变了 JavaScript 的代码组织方式。import 和 export 作为模块化的核心语法，提供了多种灵活的写法来优化代码结构和性能。本文将深入探讨这些优化写法。

基本导出与导入

命名导出与导入

javascript 复制代码

// math.js
export const PI = 3.14159;
export function square(x) {
  return x * x;
}

// app.js
import { PI, square } from './math.js';
console.log(PI); // 3.14159
console.log(square(2)); // 4

默认导出与导入

javascript 复制代码

// logger.js
export default function(message) {
  console.log(message);
}

// app.js
import log from './logger.js';
log('Hello World');

优化写法

1. 重命名导出与导入

javascript 复制代码

// 导出时重命名
export { PI as π, square as sq };

// 导入时重命名
import { PI as π, square as sq } from './math.js';

2. 统一导出

javascript 复制代码

// 集中导出所有内容
const PI = 3.14159;
function square(x) { return x * x; }
export { PI, square };

3. 混合默认导出与命名导出

javascript 复制代码

// utils.js
export default function() { /* ... */ }
export const version = '1.0';

// app.js
import utils, { version } from './utils.js';

4. 整体导入与按需使用

javascript 复制代码

import * as math from './math.js';
console.log(math.PI);
console.log(math.square(2));

5. 动态导入（异步加载）

javascript 复制代码

// 按需加载模块
button.addEventListener('click', async () => {
  const module = await import('./math.js');
  console.log(module.square(2));
});

最佳实践

优先使用命名导出：使依赖关系更明确，便于代码维护和重构
合理使用默认导出：每个模块最好只有一个默认导出，用于主要功能
避免循环依赖：设计模块结构时应避免模块间的循环引用
使用有意义的别名：当命名冲突时，使用有意义的别名而非简单重命名
考虑Tree Shaking：使用静态导入语法（而非动态导入）以便打包工具优化

现代打包工具的优化

现代打包工具（如Webpack、Rollup）可以利用ES6模块的静态特性进行优化：

Tree Shaking：消除未使用的导出代码
作用域提升：减少模块包装代码
代码分割：配合动态导入实现按需加载

总结

ES6的模块系统通过import和export提供了强大的代码组织能力。掌握各种优化写法不仅能提高代码的可读性和维护性，还能充分利用现代打包工具的性能优化特性。根据项目需求选择合适的模块化策略，是编写高质量JavaScript应用的关键。