如何修改babel-loader缓存目录？GitLab CI/CD构建缓存优化

一、让所有babel缓存都存到指定目录 #

你目前的代码只修改了单个babel-loader实例的缓存目录，但react-scripts的webpack配置里可能存在多个babel-loader（比如分别处理源码、ts/tsx文件或node_modules中需转译的依赖），导致部分缓存仍留在node_modules/.cache/babel-loader。

修改config-overrides.js，遍历所有babel-loader实例统一设置缓存目录：

const { getLoaders, loaderByName } = require('customize-cra');
const path = require('path');

module.exports = {
  webpack: (config, env) => {
    // 找到所有babel-loader实例
    const { matches } = getLoaders(config, loaderByName('babel-loader'));
    
    matches.forEach(match => {
      // 设置自定义缓存目录，用绝对路径避免相对路径问题
      match.loader.options.cacheDirectory = path.resolve(__dirname, 'babel-cache');
      // 强制开启缓存（默认开启，但明确设置更稳妥）
      match.loader.options.cache = true;
    });

    return config;
  }
};

修改后重新构建，node_modules/.cache/babel-loader应该不会再生成新的缓存，所有babel编译缓存都会集中到babel-cache目录。

二、GitLab CI/CD中保留缓存 #

因为npm ci会清空node_modules/.cache，但我们的自定义缓存目录babel-cache不在node_modules下，直接在.gitlab-ci.yml中配置缓存该目录即可：

cache:
  paths:
    - babel-cache/
  # 用lock文件内容作为缓存key，确保依赖变更时缓存失效
  key:
    files:
      - package-lock.json # 若用yarn则改为yarn.lock
    prefix: $CI_COMMIT_REF_SLUG # 不同分支使用独立缓存，可选

同时在.gitignore中添加babel-cache/，避免把缓存文件提交到Git仓库。

这样每次CI构建时，会自动恢复之前的babel-cache，跳过已编译过的代码，大幅缩短构建时间。

内容的提问来源于stack exchange，提问作者Denis