4

如何在动态路由导入中禁用 rel="prefetch"？

我正在使用@vue/cli 4.3.1 和 Webpack 4.43.0，试图禁用预取：

在 route.js 中

const Registration = () => import(  /* webpackPrefetch: false */
    /* webpackChunkName: "registration" */ '../modules/Popup/Registration.vue')

尝试在 vue.config.js 中配置，但没有帮助

chainWebpack: config => {
  config.plugins.delete('prefetch')
  config.plugins.delete('prefetch-index') // or
  config.plugins.delete('preload')
}

但无论如何都有

<link rel="prefetch" ....>
4

1 回答 1

4

Preload状态的 Vue CLI 文档：

默认情况下，Vue CLI 应用程序将自动为所有为异步块生成的 JavaScript 文件生成预取提示（作为通过动态 import() 按需拆分代码的结果）。

提示使用@vue/preload-webpack-plugin 注入，并且可以通过chainWebpack 作为config.plugin('prefetch') 进行修改/删除。

多页设置注意事项

使用多页设置时，应更改上面的插件名称以匹配结构“prefetch-{pagename}”，例如“prefetch-app”。

由于此记录的解决方案已过时，因此打开了一个问题。

然而，一个可行的解决方案只需要稍作修改，因为plugins属性的结构已经改变。这是一个使用多页设置详细说明的示例：

// File: vue.config.js

// Loading app's default title from a custom property in package.json
const { title } = require('./package.json');

module.exports = {
  // You may omit this 'pages' property if not using multipage setup
  pages: {
    app: {
      title,
      entry: 'src/main.ts',
      template: 'public/index.html',
      filename: 'index.html',
      excludeChunks: ['silentRenewOidc'],
    },
    silentRenewOidc: {
      entry: 'src/silentRenewOidc.ts',
      template: 'public/silent-renew.html',
      filename: 'silent-renew.html',
      excludeChunks: ['app'],
    },
  },
  chainWebpack: (config) => {
    // Disable prefetch and preload of async modules for 'app' page
    config.plugins.store.delete('prefetch-app');
    config.plugins.store.delete('preload-app');
    // Use this syntax if not using multipage setup
    // config.plugins.store.delete('prefetch');
    // config.plugins.store.delete('preload');
  },
};
于 2020-10-12T09:09:10.253 回答