获课：itazs.fun/18777/

#### 命名导出与默认导出：构建工具智能剔除死代码的模块设计之道

在现代前端工程化体系中，构建工具如 Webpack、Rollup、Vite 等早已成为开发者的得力助手。它们通过静态分析、依赖图构建、代码压缩等手段，不断优化最终产物的体积与性能。其中，Tree Shaking（树摇）作为一项关键的优化技术，能够在构建阶段自动识别并剔除未被使用的代码，显著减少打包体积。然而，Tree Shaking 的效果并非“开箱即用”，它高度依赖于开发者对模块结构的设计，尤其是命名导出与默认导出的选择。

命名导出，指的是通过 `export const`、`export function` 等方式显式导出多个独立成员。而默认导出则是通过 `export default` 导出一个整体，通常是一个对象、函数或类。从语法上看，两者各有优势：默认导出简洁直观，适合导出单一功能的模块；命名导出则更灵活，适合导出工具库、常量集合等多成员模块。但从构建优化的角度看，命名导出在支持 Tree Shaking 方面具有天然优势。

其根本原因在于静态可分析性。Tree Shaking 的核心前提是构建工具能够在编译时静态地分析模块的导入与导出关系。ES6 模块系统的设计正是为了满足这一需求：`import` 和 `export` 必须是顶层的、静态的声明，不能出现在条件语句或函数内部。这使得构建工具可以在不执行代码的情况下，构建出完整的依赖图。

当使用命名导出时，例如：

- `export const formatDate = () => {}`

- `export const formatCurrency = () => {}`

如果另一个模块只导入了 `formatDate`，构建工具可以明确地知道 `formatCurrency` 未被使用，从而安全地将其从最终打包文件中剔除。

而当使用默认导出一个包含多个方法的对象时：

- `export default { formatDate, formatCurrency }`

即使导入方只使用了 `formatDate`，构建工具也难以判断 `formatCurrency` 是否被间接访问（如通过 `obj.formatCurrency`），因此通常会保留整个对象，导致“死代码”无法被有效剔除。

此外，一些常见的反模式也会破坏 Tree Shaking。例如，将多个函数聚合到一个对象中再导出，或使用解构赋值进行导出，都会模糊模块的边界，使构建工具无法准确追踪依赖。同样，通配符导入 `import * as utils from './utils'` 会引入整个模块，即使只使用其中一两个函数，也会导致所有内容被打包。

因此，为了最大化构建工具的优化能力，开发者应遵循以下模块设计原则：

优先使用命名导出，尤其是在导出工具函数、常量、组件集合时。将模块拆分为多个小而独立的文件，每个文件导出单一职责的功能，有助于构建工具进行精细化分析。避免将多个功能聚合到一个默认导出的对象中，除非该对象作为一个整体被使用。在 `package.json` 中正确配置 `"sideEffects": false`，明确告知构建工具哪些文件无副作用，可安全移除。

从教育角度看，这一实践不仅是性能优化的技巧，更是培养开发者“模块化思维”的重要一环。它要求开发者在设计模块时，不仅要考虑功能的实现，还要思考代码的可维护性、可测试性与可优化性。通过合理的导出设计，我们不仅让构建工具更“聪明”，也让代码本身更清晰、更健壮。

在大型项目中，微小的优化累积起来可能带来显著的体积减少与性能提升。因此，理解命名导出与默认导出的差异，并据此设计模块结构，是现代前端开发者必须掌握的核心技能之一。这不仅是技术选择，更是一种工程素养的体现。