如何使用 Vue CLI 4.3 默认禁用链接(异步模块)预取/预加载?

Question

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

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

在路线上.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 文件(由于 通过动态导入((按需拆分代码(。

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

多页设置注意事项

使用多页设置时，应更改上面的插件名称 匹配结构"预取-{页面名称}"，例如 "预取应用"。

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

但是，由于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');
},
};