Disable preload in Vite

Question

I'm migrating a big project that uses Vue 2 and Webpack to Vue 3 and Vite. Everything looks great so far, however when we released to production in our first try we noticed that there were MANY module preload tags injected and many of the files there would probably never be used.

The question is, how can I disable preload project wise? If not possible, is there a way to telling Vite some of the imports that it should never preload?

A use case for not preloading is a mocker file which is dynamically imported only in development environment, however it's referred in the code. Since it's lazy loaded I wouldn't have problem with Webpack on this, but Vite is acting ahead of time with optimizations and including everything it finds.

Example from our codebase:

export const fetchData = createGetService({
  url: '/example-endpoint',
  mocker: async () => (await import('./example.mocker')).mockExample(),
});

Answer 1

Since Vite 3.1 we have a configuration option for controlling the preload.

// vite.config.js

import {defineConfig} from 'vite'

export default defineConfig({
    ...
    build: {
        // Disables the preload.
        modulePreload: false,

        // Or you can specify what should be preloaded.
        modulePreload: {
            resolveDependencies(url, deps, context) {
                return [] // Your list of preloaded deps.
            },
        },
    },
})

It is documented inside the configuration section on the Vite web site.

More technical details can be found on the Pull Request implementing the feature.