如何使用 Vue CLI 4.3 默认禁用链接（异步模块）预取/预加载？

Question

如何在动态路由导入中禁用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" ....>

Answer 1

预加载的 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');
  },
};