前端优化之避免桶文件 barrel file

什么叫桶文件

我不知道你们有没有这种习惯，我是喜欢把一些相似的东西放在同一个文件里，例如：

// src/svg/index.ts
export { default as SvgA } from './a.svg'
export { default as SvgB } from './b.svg'
// ...

这种文件叫做桶文件（barrel file）。

然后用的时候就：

import { SvgA } from '@/svg'

桶文件的优点

这样 import 的时候有提示，省事；以及统一在一个地方命名，尤其多人合作的时候，能避免同一个 svg 文件导出不同的名字，如：

// 小王这么写
import HelloWorld from 'hello-world.svg'

// 小李这么写
import SvgHelloWorld from 'hello-world.svg'

// 小马这么写
import HelloWorldSvg from 'hello-world.svg'

桶文件的缺点

桶文件是损害了性能的，例如，A 页面只用到了 SvgA，但是打包的时候 SvgB 也被打包进去了，所以我们要避免这种情况。

解决办法

解决方法当然是，不要用这个桶文件，直接引用具体的文件，例如：

// src/pages/a.tsx
import SvgA from '@/svg/a.svg'

// src/pages/b.tsx
import SvgB from '@/svg/b.svg'