在 Vite 中禁用预加载

我正在将一个使用 Vue 2 和 Webpack 的大项目迁移到 Vue 3 和 Vite。到目前为止，一切看起来都很棒，但是当我们第一次尝试发布到生产环境时，我们注意到注入了许多模块预加载标签，并且其中的许多文件可能永远不会被使用。

问题是，如何禁用预加载项目？如果不可能，有没有办法告诉 Vite 一些导入它永远不应该预加载？

不预加载的一个用例是模拟文件，该文件仅在开发环境中动态导入，但在代码中引用。由于它是延迟加载的，我不会对 Webpack 产生任何问题，但 Vite 提前进行了优化并包含了它发现的所有内容。

我们的代码库中的示例：

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

Since Vite 3.1我们有一个用于控制预载的配置选项。

// 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.
            },
        },
    },
})

它记录在配置部分 https://vitejs.dev/config/build-options.html#build-modulepreload在投票网站上。

更多技术细节可以在请求请求 https://github.com/vitejs/vite/pull/9938实现该功能。