export default 和 named export 在浏览器加载时无实质性能差异,二者均为静态声明、零运行开销,性能影响取决于模块粒度、加载方式和网络请求等实际因素。

export default 和 named export 在浏览器加载时没有实质性的性能差异。它们都属于 ES6 模块语法的静态导出声明,编译阶段就已确定导出结构,不参与运行时计算,也不会影响脚本下载、解析或执行速度。
本质相同:都是静态声明,零运行开销
无论用 export default 还是 export const/let/function/class,JS 引擎在解析模块时只做两件事:收集导出绑定(binding)、建立模块记录(Module Record)。这个过程发生在脚本被解析的早期,与导出形式无关。
- 两者都不触发函数调用、对象创建或表达式求值(除非导出的是立即执行的表达式,但那是业务逻辑,不是语法本身带来的)
- 模块图(Module Graph)的构建、依赖分析、顶层执行顺序,均由 import 语句和模块拓扑决定,与 default 或 named 的选择无关
- 打包工具(如 Vite、Webpack)对二者的处理也完全一致:提取导出、做 tree-shaking、生成 chunk —— 区别仅在于导入写法,不影响产出体积或加载行为
真正影响加载性能的因素
实际开发中,更值得关注的是这些方面:
- 模块粒度:一个文件导出 20 个命名成员,不如拆成多个小模块按需导入;过大模块会拖慢解析和执行,和用不用 default 无关
-
资源加载方式:是否使用
<script type="module"></script>(自带 defer 行为)、是否配合import()动态导入做代码分割 - 网络请求数量:过多细碎的模块文件会增加 HTTP 请求(尤其在 HTTP/1.1 下),可通过构建合并或预加载优化
- 是否启用模块联邦或共享模块:跨包复用时,default 导出常用于包裹整个子应用,但性能瓶颈在通信协议和沙箱初始化,不在导出语法
一个常见误解澄清
有人认为 “export default { a, b, c } 只导出一个对象,比分别 export const a = ... 更轻量”——这是不准确的。
- 前者导出的是一个默认绑定,其值是一个对象;后者导出三个独立绑定
- Tree-shaking 能识别并移除未使用的命名导出,但无法安全地摇掉 default 导出内部未用的属性(除非工具支持深度分析,如 Webpack 5+ 对 JSON-like default 的有限支持)
- 所以从可优化性角度看,named export 反而更利于精细化打包,长期看可能带来更小的产物体积
归根结底,选 default 还是 named,应基于设计意图:是否需要模块有“主入口”(如 React 组件、配置对象),是否允许多个导出、是否便于测试与复用。性能不该成为决策依据。











