JavaScript中import和export语句的最优放置位置是什么？

import 语句的放置要求 #

所有静态import声明必须统一放在文件最顶部，位于所有业务逻辑代码之前。
这是ES模块的规范要求：静态import会被引擎提前执行，不管你写在文件哪个位置都会提升到模块最顶部执行，散落在代码中只会打乱依赖逻辑，降低可读性。动态import()按需加载的语法不受这个限制，可以按业务逻辑放在需要的位置。

export 语句的高效放置方案 #

首先明确：从运行性能层面，export放在任意合法位置没有差异，ES模块解析阶段会提前扫描全文件的导出声明，不会影响加载速度。我们所说的「高效」是指代码可维护性、开发效率层面的高效。

1. 紧跟在待导出的变量/函数之后 #

适用场景

文件为独立工具函数集合，每个导出项自包含，不会被本文件内其他逻辑调用。

优势

修改对应逻辑时无需滚动到文件首尾调整导出声明，不会出现函数改名后漏改导出名的问题，也能一眼识别某段逻辑是否为对外暴露的接口。
示例写法：

// 直接声明时导出
export function formatTime(timestamp) {
  // 逻辑实现
}

// 或者声明完成后立刻导出
function calculateFee(amount, rate) {
  // 逻辑实现
}
export { calculateFee }

2. 文件末尾统一导出 #

适用场景

300-400行的中等规模业务逻辑模块，内部存在大量私有变量、内部调用的函数，仅对外暴露少数核心接口。

优势

所有对外接口集中展示，无需通读全文就能快速了解模块的对外能力，也能避免误导出内部临时变量，方便统一做重命名、批量导出等操作。
示例写法：

// 内部私有逻辑
const PRIVATE_BASE_RATE = 0.03
function getDiscount(userLevel) {
  // 内部逻辑
}

// 对外暴露的核心逻辑
function createOrder(goodsInfo, userInfo) {
  // 调用内部逻辑实现
}
function getOrderList(userId) {
  // 调用内部逻辑实现
}

// 末尾统一导出
export { createOrder, getOrderList }

3. 文件开头放置导出 #

完全不推荐该方案。ES规范虽然支持先写导出声明再定义对应变量，但可读性极差，维护代码时需要反复在开头的导出列表和下文的实现之间跳转，出错概率极高。

最终最优选择 #

• 工具类函数文件：优先选择紧跟待导出项之后的写法，开发效率最高
• 业务逻辑模块：优先选择文件末尾统一导出的写法，可维护性最高

内容的提问来源于stack exchange，提问作者Rithish