What is vendor chunk splitting and why is it important for caching?

Vendor chunk splitting separates third-party dependencies (React, ReactDOM, lodash, etc.) from your application code into a dedicated chunk.

Why it matters for caching:

• Your application code changes on every deploy; vendor libraries change rarely.
• Without splitting, a single JS file changes on every deploy — users must re-download React with every code push.
• With splitting, the vendor chunk URL (content-hashed) stays the same across deploys — it's served from the browser cache immediately.

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vendor-react': ['react', 'react-dom'],
        'vendor-router': ['react-router-dom'],
        'vendor-query': ['@tanstack/react-query'],
      }
    }
  }
}

Result: users who visited before only need to download the small app chunk on the next deploy, not the large vendor chunk again.