Prettier 的缓存机制是如何工作的?如何使用缓存提高性能? - 面试题

Prettier 的缓存机制详解

Prettier 2.0+ 版本引入了内置缓存机制,可以显著提高重复格式化的性能,特别是在大型项目中。

缓存机制原理

Prettier 的缓存基于文件内容和配置的哈希值:

首次格式化: 解析文件并格式化,将结果存储在缓存中
后续格式化: 比较文件内容和配置的哈希值
缓存命中: 如果哈希值相同,直接使用缓存结果
缓存未命中: 重新格式化文件并更新缓存

使用缓存

基本用法:

bash
# 启用缓存格式化
prettier --write --cache "**/*.js"

# 指定缓存目录
prettier --write --cache --cache-location .prettier-cache "**/*.js"

缓存策略:

bash
# 基于内容的缓存(默认)
prettier --write --cache --cache-strategy content "**/*.js"

# 基于元数据的缓存
prettier --write --cache --cache-strategy metadata "**/*.js"

缓存配置选项

1. cache-location 指定缓存文件存储位置:

bash
# 默认位置
prettier --write --cache "**/*.js"

# 自定义位置
prettier --write --cache --cache-location .my-cache "**/*.js"

# 使用相对路径
prettier --write --cache --cache-location node_modules/.cache/prettier "**/*.js"

2. cache-strategy 选择缓存策略:

content: 基于文件内容(默认,更准确但稍慢)
metadata: 基于文件元数据(更快但可能不准确)

3. 清除缓存

bash
# 清除缓存并重新格式化
prettier --write --cache --cache-strategy content "**/*.js"

# 手动删除缓存目录
rm -rf .prettier-cache

缓存最佳实践

1. CI/CD 环境

yaml
# GitHub Actions
- name: Format with cache
  run: |
    prettier --write --cache "**/*.js"
    # 缓存目录会被自动保存和恢复

2. 本地开发

bash
# 在 package.json 中配置
{
  "scripts": {
    "format": "prettier --write --cache \"src/**/*.js\"",
    "format:check": "prettier --check --cache \"src/**/*.js\""
  }
}

3. Git Hooks

json
// .husky/pre-commit
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write --cache"
    ]
  }
}

性能对比

不使用缓存:

bash
# 首次格式化 1000 个文件
time prettier --write "**/*.js"
# 实际执行: ~5s

使用缓存:

bash
# 首次格式化 1000 个文件
time prettier --write --cache "**/*.js"
# 实际执行: ~5s

# 第二次格式化(无变化)
time prettier --write --cache "**/*.js"
# 实际执行: ~0.5s (10x 提升)

缓存注意事项

1. 配置变更

修改 Prettier 配置会自动使缓存失效
确保配置文件在版本控制中
团队成员使用相同配置

2. 文件变更

文件内容变化会自动更新缓存
删除文件会清理对应缓存
重命名文件会重新生成缓存

3. 缓存管理

定期清理缓存目录
在 CI 中缓存 .prettier-cache 目录
监控缓存大小

故障排查

缓存不生效:

bash
# 检查缓存目录
ls -la .prettier-cache

# 清除缓存重新格式化
rm -rf .prettier-cache
prettier --write --cache "**/*.js"

缓存过大:

bash
# 检查缓存大小
du -sh .prettier-cache

# 清理旧缓存
find .prettier-cache -type f -mtime +7 -delete

通过合理使用 Prettier 缓存机制,可以显著提高格式化性能,特别是在大型项目中。