前端工程化利器:Node.js 文件匹配库 fast-glob 完全指南——比传统方案快 350% 的「文件搜索神器」

为什么需要 fast-glob?

在前端工程化场景中,文件匹配是高频操作:自动化构建、资源打包、静态资源管理等都依赖高效的路径匹配。传统的 node-glob 虽然功能齐全,但性能瓶颈明显。fast-glob 应运而生——它以 极简 API超高性能(官方称比 node-glob 快 350%)成为新一代文件匹配工具。它的周下载量也达到了恐怖的6千万,可见他的受欢迎程度。

在这里插入图片描述

二、核心优势

1. 闪电般的速度

  • 基于 micromatchpicomatch 算法优化,减少冗余遍历。
  • 支持并行文件系统遍历,充分利用多核 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-glob1.2s功能全,速度较慢
tiny-glob0.8s轻量但功能受限
fast-glob0.3s高性能 + 完整功能

六、最佳实践

1. 模式语法规范

  • *匹配任意字符,?匹配单个字符,**匹配多级目录。
  • 示例:src/**/*.{js,ts} 匹配所有 JS 和 TS 文件。

1. 避免过度匹配

  • 使用 ignore 选项排除 node_modules 等目录。
  • 结合 .gitignore 规则(通过 gitignore: true 配置)

七、总结

fast-glob 以其 极简的 API碾压级的性能,成为前端工程化中文件匹配的首选工具。无论是构建工具开发、静态资源管理,还是自动化脚本,它都能显著提升效率。

延伸阅读

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值