前端：大家的 API 都是怎么导入导出的？

[tlerbao]

Q:大家通常会选择下面哪种方案，指点一下理由；方案三中普通和箭头哪个更好？

方案一

// 分别导出
export function funA(){}
export function funB(){}
export function funC(){}
...

// 分别导入（按需）
import {funA,funB,...} from 'XX'

方案二

// 分别导出 + 默认导出
export function funA(){}
export function funB(){}
export function funC(){}
...

export default { funA,funB,funC }

// 可默认全部导入也可按需导入
import {funA,funB} from 'XX'
或
import Api from 'xx'
Api.funA...

方案三

// 直接默认导出全部
export default {
    // 普通好？
    funA(){},

    // 箭头好？
    funB: () => {}
}
// 默认导入
import Api from 'XXX'

[webszy]

方案 1 ，方便 tree-shaking

[webszy]

再换成 箭头函数 更好

@webszy

[tlerbao]

@webszy #2 咱就是说假设 default 有 5 个接口，那么 import default 和只导入其中两个最后在打包体积上能差多啥哈哈。是不是中小项目完全不用考虑这个。

[codehz]

不是可以 import * as Api from 'XXX' 吗

[webszy]

@tlerbao 是的，不考虑优化你想怎么写就怎么写，既然你都问这个问题了，为什么不把优化做好，哪怕减少 0.1kb 对不对

[kneo]

看具体情况。细粒度的函数肯定是一二。复杂点的业务有时候也用得着三。关键还是看实际怎么用的。要是用的别扭就再琢磨琢磨。

[XCFOX]

几乎不用 export default ，因为 export default 不方便配合桶文件使用

[tlerbao]

@kneo 在打包体积效率上有没有差很多

[IvanLi127]

从编码风格上来说，我选方案一，它看起来直观。方案二写起来怕漏掉，方案三缩进太多。

[tlerbao]

@XCFOX 知识盲区，什么叫方便配合桶文件使用？

[tlerbao]

@webszy #5 方案一你说换成箭头更好但是在 Webstorm 下，箭头函数没有类型注解，不如普通 function 来的直观
不知道你能不能看见图，红线标注的普通函数默认有类型注解，不用悬停鼠标就知道返回什么类型哈

[webszy]

@tlerbao 这个不清楚，我没碰到过这个问题，不用箭头函数也可以，箭头函数其实就是原型简化了一点，如果你有 babel 转译了其实还是 function

[XCFOX]

桶文件本身不提供任何实现，而是重新导出其他模块的导出，一个典型的桶文件是： https://github.com/microsoft/TypeChat/blob/main/src/index.ts

重新导出语句 export * from 'xxx' 是无法导出 export default 的。

假如你有这样的文件结构：
src/
|-- utils/
| |-- format.ts
| |-- validate.ts
| |-- index.ts
并且在 src/utils/format 中使用 export default ，
那么始终得使用 import '../utils/format' 导入。

但是如果你使用桶文件，通常只需要 import '../utils'

[rabbbit]

const funA = () => {}
export {funA}

import {funA} from "xxx"

[tlerbao]

@XCFOX #13 那这样直接全部导入了，打包体积会不会很大哈。

[tlerbao]

@rabbbit 我 11 楼的回复就有这个差别

[XCFOX]

@tlerbao #15 不会，有 tree shaking

[tlerbao]

@XCFOX #17 太专业，你说的 tree shaking ，是某些插件自动，还是 vite 什么的有这个，虽然全部导入了，但是用到什么打包什么？瞎猜

[iOCZS]

@tlerbao esmoudle

[XCFOX]

@tlerbao 使用 vite 的话，在 dev 模式下不会自动 tree shaking ，但在 build 时会 tree shaking ，使用 webpack 始终会自动 tree shaking