为什么需要 fast-glob?
在前端工程化场景中,文件匹配是高频操作:自动化构建、资源打包、静态资源管理等都依赖高效的路径匹配。传统的 node-glob
虽然功能齐全,但性能瓶颈明显。fast-glob
应运而生——它以 极简 API 和 超高性能(官方称比 node-glob
快 350%)成为新一代文件匹配工具。它的周下载量也达到了恐怖的6千万,可见他的受欢迎程度。
二、核心优势
1. 闪电般的速度
- 基于
micromatch
和picomatch
算法优化,减少冗余遍历。 - 支持并行文件系统遍历,充分利用多核 CPU。
2. 简洁的 API 设计
- 同步(
sync
)与异步(async
)双模式,适应不同场景需求。 - 支持动态模式匹配(如
**/*.js
)、忽略规则(.gitignore
语义)。
3. 无缝集成主流工具链
- 被 Vite、Webpack 插件(如
vite-plugin-svg-icons
)深度采用,用于自动化文件收集。
三、快速上手
1. 安装
npm install fast-glob
2. 基础用法
const fg = require('fast-glob');
// 异步匹配所有 JS 文件
fg.async(['**/*.js', '!node_modules/**'])
.then(files => console.log(files));
// 同步模式(适用于脚本类场景)
const files = fg.sync('src/**/*.{ts,tsx}');
3. 高级配置
fg.sync('**/*.svg', {
cwd: 'src/assets', // 指定根目录
ignore: ['**/test/**'], // 忽略路径
absolute: true, // 返回绝对路径
dot: true, // 包含隐藏文件
stats: true // 获取文件元信息(大小、时间等)
});
四、实战场景
1. Vite 插件开发:自动收集 SVG 图标
在 vite.config.js
中结合 vite-plugin-svg-icons
实现图标自动化:
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import fg from 'fast-glob';
export default {
plugins: [
createSvgIconsPlugin({
iconDirs: fg.sync('src/icons/**/*.svg', { absolute: true })
})
]
}
2. 构建工具:批量处理多目录文件
// 匹配 src/pages 下所有 HTML 文件
const pages = fg.sync('src/pages/**/*.html');
pages.forEach(html => generateRoute(html));
五、性能对比
工具 | 10,000文件耗时 | 特点 |
---|---|---|
node-glob | 1.2s | 功能全,速度较慢 |
tiny-glob | 0.8s | 轻量但功能受限 |
fast-glob | 0.3s | 高性能 + 完整功能 |
六、最佳实践
1. 模式语法规范
*
匹配任意字符,?匹配单个字符,**匹配多级目录。- 示例:
src/**/*.{js,ts}
匹配所有 JS 和 TS 文件。
1. 避免过度匹配
- 使用
ignore
选项排除node_modules
等目录。 - 结合
.gitignore
规则(通过gitignore: true
配置)
七、总结
fast-glob
以其 极简的 API、碾压级的性能,成为前端工程化中文件匹配的首选工具。无论是构建工具开发、静态资源管理,还是自动化脚本,它都能显著提升效率。