javascript - 如何使用 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 documentation for Preload状态:

By default, a Vue CLI app will automatically generate prefetch hintsfor all JavaScript files generated for async chunks (as a result ofon-demand code splitting via dynamic import()).

The hints are injected using @vue/preload-webpack-plugin and can bemodified / deleted via chainWebpack as config.plugin('prefetch').

Note for multi page setups

When using a multipage setup, the plugin name above should be changedto match the structure 'prefetch-{pagename}', for example'prefetch-app'.

有 an issue opened因为这个记录在案的解决方案已经过时了。
然而，一个可行的解决方案只需要稍作修改，如 plugins属性(property)的结构已经改变。这是一个使用多页设置详细说明的示例:

// 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');
  },
};