发现一个自动优化 js/ts 桶文件的工具

查看 18|回复 1
作者:Ketteiron   
https://github.com/webpro/unbarrelify
这个工具可以自动删除桶文件并更新正确路径,里面的文章也值得一读。
不过试用了一下在 windows 上路径处理有问题。
桶文件是 js/ts 社区大范围错误使用的一种重新导出写法。
你会发现很多开源项目都会大量使用 index.ts 然后重新导出子模块
export * from './xx'
这是错误的做法,但使用人太多了,大家都会以为大家都在用那么我也应该这样用,最后像病毒一样传染了整个生态。
如果你的项目作为一个库发行,那么有使用桶文件的正当理由,但其他场景下应该尽量避免。
这种写法的优点是可以在一行里 import 多个函数/类型,当然它实际上不是"优点",缺点是 ESM 打包优化困难、启动慢、热更新慢、CI 慢,调用不清晰,潜在的循环依赖。
人们以为随着工具链迭代这些缺陷都会慢慢消失,但遗憾的是,理论上不存在真正的解决办法,能够做的就是不断加缓存,但收效甚微。
你使用重新导出写法去引用一个十万行模块里面的十行左右函数,打包器、开发服务器必须遍历完十万行代码才能分析好依赖关系把这十行函数打包进去。
如果用代码说话,你不应该使用这样的写法
import { a, type B } from '@/x'
而是删掉你的 index.ts ,换成
import { a } from '@/x/a'
import type B from '@/x/b'
第一天这么使用,你可能会觉得难以接受,但是忍耐几天后,你大概会接受这种写法,并且感受到在一个大型屎山项目中启动速度、打包速度、CI 检查速度的飞跃提升。如果你的项目桶文件足够多,这个提升很可能是几十倍。
当然工具链、CI 的速度只是其中一部分原因,更重要的是它消除了不必要的隐性封装,如果你直接依赖 x/a ,你就应该只 import x/a ,而非整个 x 。
在发现这个工具之前,我一直使用 eslint 插件来避免创建任何桶文件,因此我用不上这个工具,但应该有不少人需要它,希望有一天能彻底终结 barrel-files 问题。

barrel-files, esm, 优化

craftsmanship   
受教了 我也喜欢用 barrel files 以为是 JS 社区惯例 没想到是反模式…
您需要登录后才可以回帖 登录 | 立即注册

返回顶部