vue.js 在Vite中禁用预加载

zxlwwiss  于 2023-05-18  发布在  Vue.js
关注(0)|答案(2)|浏览(838)

我正在将一个使用Vue 2和Webpack的大项目迁移到Vue 3和Vite。到目前为止,一切看起来都很好,但是当我们在第一次尝试中发布到生产中时,我们注意到注入了许多模块预加载标签,并且其中的许多文件可能永远不会被使用。
问题是,我如何禁用预加载项目明智?如果不可能,有没有办法告诉Vite一些进口,它不应该预加载?
不预加载的用例是一个模拟文件,它只在开发环境中动态导入,但是它在代码中被引用。由于它是惰性加载的,我不会有Webpack在这方面的问题,但Vite是提前采取行动,优化和包括所有它发现的。
我们的代码库示例:

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

kmpatx3s1#

currently no official way to disable preloads in the build
一个解决方法是使用Vite插件,通过transformIndexHtml钩子从构建的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

f4t66c6m

f4t66c6m2#

由于Vite3.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.
            },
        },
    },
})

它记录在Vite网站的配置部分。
更多技术细节可以在实现该功能的Pull Request上找到。

相关问题