Granular Chunks Example (React, Vite)

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // framework dependencies
          const frameworks = ["react", "react-dom", "scheduler"];

          // dependencies that are used across every page
          const commons = ["ky", "@tanstack/react-query", "react-router-dom"];

          // Dependencies shared across specific multiple pages
          const shared = ["@tanstack/react-form", "zustand"];

          // dependencies that change frequently (e.g Internal libraries that are constantly updated)
          const frequentlyChanged = ["some-library"];

          if (id.includes("node_modules")) {
            if (frameworks.some((f) => id.includes(`node_modules/${f}/`))) {
              return "frameworks";
            }
            if (commons.some((c) => id.includes(`node_modules/${c}/`))) {
              return "commons";
            }
            if (shared.some((s) => id.includes(`node_modules/${s}/`))) {
              return "shared";
            }

            const name = frequentlyChanged.find((f) =>
              id.includes(`node_modules/${f}/`)
            );

            if (name) {
              return `${name}-chunk`;
            }
          }
        },
      },
    },
  },
});