在 Vite 中禁用预加载

Question

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

问题是，我怎样才能明智地禁用预加载项目？如果不可能，有没有办法告诉 Vite 一些永远不应该预加载的导入？

不预加载的一个用例是一个模拟文件，它只在开发环境中动态导入，但是在代码中引用了它。因为它是延迟加载的，所以我不会对 Webpack 有任何问题，但 Vite 会提前进行优化并包括它找到的所有内容。

来自我们代码库的示例：

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

Answer 1

有 currently no official way to disable preloads in the build.

解决方法是使用 Vite 插件，通过 the transformIndexHtml hook:

从构建的 index.html 中删除不需要的预加载

// plugins/removePreloads.js
export default ({ filter = () => false } = {}) => ({
  name: 'remove-preloads',
  enforce: 'post',
  transformIndexHtml(html) {
    return html.replace(
      /\s*(<link rel="(?:module)?preload".*?>)\s*/gi,

      (orig, linkStr) => {
        if (filter(linkStr)) {
          return orig
        }
        console.log('\nremoving ' + linkStr)
        return ''
      }
    )
  },
})

// vite.config.js
import { defineConfig } from 'vite'
import removePreloads from './remove-preloads'

export default defineConfig({
  plugins: [
    // remove all preloads
    removePreloads(),

    // Or remove specific preloads
    removePreloads({
      filter: linkStr => !linkStr.contains('someFilename')
    }),
    ⋮
  ],
})

demo

在 Vite 中禁用预加载

Disable preload in Vite

vue.js

vite