Caching Dependencies & Browsers for Speed

📌 Definition:

📖 Detailed Explanation:

Because runners are ephemeral, every job would otherwise re-download all dependencies and browsers on each run — often the slowest part of the pipeline. A cache is keyed by a hash of the relevant lockfile (e.g. package-lock.json): if the key matches a previous run, the cache is restored; if dependencies changed, the key changes and a fresh cache is built and saved. The critical rule is correct keying — too broad and you serve stale dependencies; too narrow and you never get a hit. Restore-keys provide graceful fallback to a partial cache. Caching is distinct from artifacts: caches are an optimization that can be regenerated and shouldn't be relied upon for correctness, whereas artifacts are outputs you deliberately persist. Playwright browsers are a common high-value cache target since they're large.

🔑 Key Points:

• Ephemeral runners re-fetch everything each run unless cached
• Key the cache by a hash of the lockfile so it invalidates when deps change
• restore-keys give graceful fallback to a recent partial cache
• Caches are a regenerable optimization; artifacts are persisted outputs — don't confuse them
• Cache large items like node_modules/npm cache and Playwright browser binaries

🌍 Real-World Example:

📎 Code Example:

steps:
  - uses: actions/checkout@v4
  - uses: actions/setup-node@v4
    with:
      node-version: 20
      cache: 'npm'                     # caches the npm download cache, keyed on lockfile
  - run: npm ci

  # Cache Playwright browser binaries, keyed on the installed version
  - name: Cache Playwright browsers
    uses: actions/cache@v4
    with:
      path: ~/.cache/ms-playwright
      key: pw-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
      restore-keys: pw-${{ runner.os }}-
  - run: npx playwright install --with-deps