Vite plugin calls resolvePluginConfig multiple times per request

[kiliman]

Reproduction

https://github.com/kiliman/remix-resolve-plugin-config

This shows that resolvePluginConfig is being called multiple times per request.

System Info

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 5.25 GB / 96.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.6.1 - ~/.nvm/versions/node/v20.6.1/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.6.1/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.6.1/bin/npm
    pnpm: 8.12.1 - ~/.nvm/versions/node/v20.6.1/bin/pnpm
    bun: 1.0.12 - ~/.bun/bin/bun
    Watchman: 2023.11.13.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 120.0.6099.129
    Chrome Canary: 121.0.6110.0
    Safari: 17.2.1
  npmPackages:
    @remix-run/dev: ^2.4.1 => 2.4.1 
    @remix-run/node: ^2.4.1 => 2.4.1 
    @remix-run/react: ^2.4.1 => 2.4.1 
    @remix-run/serve: ^2.4.1 => 2.4.1 
    vite: ^5.0.0 => 5.0.10

Used Package Manager

npm

Expected Behavior

Remix should only call resolvePluginConfig once at startup and when config changes.

// vite.config.ts

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix({
      routes: () => {
        // this should only be called on startup and when config changes
        // not multiple times per request
        console.log("routes", Date.now());
        return {};
      },
    }),
    tsconfigPaths(),
  ],
});

Actual Behavior

resolvePluginConfig is called multiple times per request.

The image below shows the initial call, but when I opened the home page, you'll see it called the function again four times in a row.

[hi-ogawa]

I think this is a somewhat known issue and probably considered not so critical (as initial perf improvement is done by #7908).
Do you have any concrete issue which is blocked by this behavior?

Currently resolvePluginConfig is called during middleware (and other places as well), which means it will be called at least once for each Remix server-render/loader-data request:

remix/packages/remix-dev/vite/plugin.ts

Lines 837 to 839 in 438a9b3

	viteDevServer.middlewares.use(async (_req, _res, next) => {
	try {
	let pluginConfig = await resolvePluginConfig();

---

Expected Behavior
Remix should only call resolvePluginConfig once at startup and when config changes.

I thought such behavior would make sense, so I attempted such refactoring sometime ago #8164
Additionally, I think Remix also needs to call resolvePluginConfig when a route file is added/removed (but not when simply modified).

Technically route files can live anywhere since routes option can be customized, but for now, my implementation is checking any file addition/removal of appDirectory and modification of vite.config.ts, which I think is a fair assumption.

[kiliman]

For most apps it's probably not an issue. But if you're using custom routes that scan the file system, it could cause performance problems for projects with many routes.

[richaquino]

Do you have any concrete issue which is blocked by this behavior?

Unless there's a better way to setup test routes (for quickly adding things without forms, like users), this really slows down tests.

i.e. If the grunge stack was converted to use vite, it'll suffer a bit because it sets up a create-user test route in its config. https://github.com/remix-run/grunge-stack/blob/main/remix.config.js

[pcattori]

Fixed by #8164