TailwindCSS 与 Vite 构建性能优化：处理大型 GeoJSON 文件的正确姿势

在基于 Vite 和 TailwindCSS 的前端项目中，开发者有时会遇到构建速度突然变慢的问题。本文通过一个典型案例，深入分析问题根源并提供解决方案。

问题现象

当项目中存在大型 GeoJSON 文件（如示例中的 19MB 市政边界数据）时，即使这些文件仅用于后端处理且未被前端代码引用，Vite 的构建时间也会从正常的 400ms 骤增至 1 分 17 秒。这种性能下降在 TailwindCSS v4.0.10 及更高版本中尤为明显。

根本原因

TailwindCSS 的 Vite 插件在 v4.0.10 版本后修改了文件扫描策略，会默认扫描项目目录下的所有文件，包括与前端无关的大型数据文件。这种全量扫描行为导致构建工具需要处理不必要的文件内容，从而显著增加了构建时间。

解决方案

临时解决方案

在 CSS 文件中添加排除规则，明确告知 TailwindCSS 忽略特定类型的文件：

@source not "../../**/*.geojson";

这条规则会阻止 TailwindCSS 扫描项目中的 GeoJSON 文件，恢复原有的构建速度。

长期建议

TailwindCSS 团队已确认这是一个需要修复的问题，计划在未来版本中默认忽略 .geojson 等数据文件。开发者可以关注官方更新日志获取最新进展。

最佳实践

1. 前端资源隔离：将仅用于后端的数据文件存放在与前端资源完全分离的目录结构中
2. 构建配置优化：定期检查构建工具的扫描范围，排除不必要的文件类型
3. 版本兼容性检查：在升级构建工具链时，注意性能变化并及时调整配置

技术启示

这个案例揭示了现代前端构建工具的一个重要原则：明确的资源边界定义对于构建性能至关重要。开发者应当主动管理构建工具的扫描范围，而不是依赖工具的默认行为，特别是在处理混合型项目（前后端代码共存）时。

通过理解构建工具的工作原理和合理配置，可以显著提升开发体验，避免因无关资源导致的性能问题。