Vite watch is slow: transforms all node_modules and recompiles all inputs on every change

[davidgonzalezvaquero]

Hi! I’m experiencing performance issues with Vite in watch mode in my project.

Problem:
Every time I change a single file and the watcher triggers, Vite seems to transform a large number of modules (including node_modules) and recompiles all the configured inputs, not just the one related to the changed file. This results in very slow incremental builds. For example, after modifying a single file, I see logs like:

✓ 20 modules transformed.
...
built in 67404ms.

Environment:

• Vite version: 6.3.5
• Node.js version: 18.12
• OS: macOS

My configuration:

I’m using a multi-page setup with multiple entry points in rollupOptions.input and some custom output options. Here’s a relevant excerpt from my vite.config.js:

export default defineConfig(({ mode }) => {
    const isDev = mode === "development";
    return {
        mode,
        plugins: [react()],
        base: "/public/component/",
        resolve: {
            extensions: [".js", ".jsx"],
            alias: {
                react: resolve(__dirname, "node_modules/react"),
                Common: resolve(__dirname, "common"),
                // ...other aliases...
            },
        },
        build: {
            rollupOptions: {
                input: {
                    "project-navigator": resolve(__dirname, "page/project-navigator/ProjectNavigator.jsx"),
                    // ...other entries...
                },
                output: {
                    format: "es",
                    entryFileNames: "[name]/[name].min.js",
                    chunkFileNames: "profields/[name].[hash].min.js",
                    assetFileNames: "assets/[name].[ext]",
                },
                maxParallelFileOps: 1000,
            },
            commonjsOptions: {
                transformMixedEsModules: true,
                requireReturnsDefault: "auto",
            },
            sourcemap: isDev,
            minify: !isDev,
            outDir: resolve(__dirname, "../src/main/resources/public/component"),
        },
    };
});

What I’ve tried:

• I’ve tried tweaking the watch options and excluding node_modules, but the problem persists.
• Changing rollup and optimizeDeps configuration.
• Adding modules as external.
• No custom plugins or unusual configuration beyond what’s shown above.

None of these changes have improved the situation.

Question:

Is there a way to make Vite only recompile the input(s) related to the changed file, and avoid transforming all of node_modules and all entry points on every change? Is this expected behavior for multi-page setups, or am I missing some configuration to optimize incremental builds in watch mode?

Any advice or pointers would be greatly appreciated!

[acelaya]

How do you start vite in dev? Do you run it directly or through something else?

[davidgonzalezvaquero]

Thanks for your detailed response. I appreciate the insights!

I've been testing again with the perspective you provided, but I'm facing a specific challenge with our application architecture:

Our application is a Jira add-on/plugin, so our workflow is different from a typical web application. Here's how it works:

1. The Jira server responds with templates (Velocity templates)
2. These templates load our JS bundles
3. We don't have standalone HTML entry points like a typical Vite application would have

This is why I'm using JavaScript entry points directly in the rollupOptions.input configuration rather than HTML files. Each entry point corresponds to a different page/component of our add-on.

I've tried to use vite dev as you suggested, but it doesn't work well with our server-side template rendering approach since it expects to control the HTML serving.

Is there a way to optimize the vite build --watch workflow for this kind of server-side template + JS bundle architecture? Or perhaps a way to configure Vite's dev server to work with our Jira add-on setup?

[acelaya]

This is a tricky setup. Since all assets are served by your dedicated backend, you need an actual bundle to be generated as if it was for production, via rollup, which is slower.

One possible approach would be to generate a bundle/chunk with all third party code from node_modules (that you know won't change during development) and another one with your application code for the "active" page. If only the application code needs to be "re-bundled" on edit, it should still be fairly fast (I would expect).

Using this rollup option you might be able to do that https://rollupjs.org/configuration-options/#output-manualchunks

I would try with this snippet that is used as an example there:

If a string is returned, the module and all its dependency will be added to the manual chunk with the given name. For instance this will create a vendor chunk containing all dependencies inside node_modules:

function manualChunks(id) {
  if (id.includes('node_modules')) {
    return 'vendor';
  }

  return null;
}

[davidgonzalezvaquero]

It's not working for me either, and I believe the issue is related to how we're using many components from an external library (@atlaskit). Even when I add it to the manualChunks configuration, all node_modules are still being transformed with every change and it's too slow.

[acelaya]

That's unfortunate.

I'm afraid this is as far as my knowledge on the topic can get us.

I have the feeling it should be possible to get something working, but it probably requires tweaking some other parts outside of vite's scope.

Let's see if someone else can throw a bit of light here.

[davidgonzalezvaquero]

Thanks for the help and for keeping an eye on it! In the end, vite dev worked for me.

[sapphi-red]

Our application is a Jira add-on/plugin, so our workflow is different from a typical web application. Here's how it works:

1. The Jira server responds with templates (Velocity templates)
2. These templates load our JS bundles
3. We don't have standalone HTML entry points like a typical Vite application would have

It sounds like the backend integration feature may work.
The steps for using vite dev for your case would probably be:

1. Set server.cors.origin to the backend server origin
2. Point the script tag to http://localhost:5173/public/component/page/project-navigator/ProjectNavigator.jsx with type="module"
3. Run vite dev alongside the backend server

[davidgonzalezvaquero]

I managed to get it working with what you said, thank you so much! 🙌