Custom Rollup option for manual JS chunk output passed to the Vite config file isn't working

[rabbykhairul]

Reproduction

When doing the production build, I wanted to manually control the JS chunks generated by default on the client side. I added the rollup output config options in my project's vite.config file and expected that the client build will output JS chunks manually as I wanted them to. But these config were completely ignored by the remix plugin during the build time.

I inspected further inside the remix repo and found that the plugin.ts file isn't including the custom config I wrote when calling the vite runtime. I want to reduce the number of JS files in production build for performance reason, how can I do it? Is there any plan to support this?

My vite config

import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  server: {
    port: Number(process.env.PORT || 3000),
    hmr: hmrConfig,
    fs: {
      // See https://vitejs.dev/config/server-options.html#server-fs-allow for more information
      allow: ["app", "node_modules"],
    },
  },
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*"],
    }),
    tsconfigPaths(),
  ],
  build: {
    sourcemap: true, // Source map generation must be turned on
    emptyOutDir: true,
    assetsInlineLimit: "7168",
    rollupOptions: {
      output: {
        entryFileNames: "[name]-[hash].js",
        chunkFileNames: "chunks/[name]-[hash].js",
        assetFileNames: "assets/[name]-[hash][extname]",
        sanitizeFileName: true,
        manualChunks: (id, { getModuleIds, getModuleInfo }) => {
          // my custom chunk logic here
          },
    },
  },
  }
})

---

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M3
    Memory: 164.66 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1.1

Used Package Manager

npm

Expected Behavior

Should output custom JS chunks on the client build as I've put custom rollup options in the vite config file.

Actual Behavior

Remix build is outputting chunks as usual and ignoring the custom config options.

[rabbykhairul]

Can someone kindly give me an answer? 🙏

[sparkida]

@rabbykhairul this should work, however manualChunks can be tricky. I tested on latest Remix and Vite (maybe check your version).

Do you see output if you console the "id"?

manualChunks: (id, { getModuleIds, getModuleInfo }) => {
  console.log(id); 
},

If you do then it is working and it's more about the nuances when dealing with manualChunks, which is hard to troubleshoot without seeing your custom logic. But, you can try a simple example on one dependency and examine the built files:

manualChunks: (id) => {
  if (id.includes("@some-node-module-dep")) {
    return "my-chunked-module-name.js";
  }
}