How disable link (async module) prefetch / preload by default with Vue CLI 4.3?

Question

How disable rel="prefetch" in dynamic route import?

I'm using @vue/cli 4.3.1 and Webpack 4.43.0, trying to disable prefetch:

in route.js

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

trying configure in vue.config.js, but not help

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

but anyway have

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

or const Registration = () => import( /* webpackPrefetch: -999 */ /* webpackChunkName: "registration" */ '../modules/Popup/Registration.vue') not help — Siviy, Jun 02 '20 at 11:12
if you're using SSR, it's configurable in createBundleRenderer - https://ssr.vuejs.org/api/#shouldprefetch — Ivan Ternovtsiy, Jul 08 '20 at 10:12

score 4 · Answer 1 · answered Oct 12 '20 at 09:09

Vue CLI documentation for Preload states:

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

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

Note for multi page setups

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

There is an issue opened because this documented solution has been outdated.

However, a working solutions is needing only slight modification as the plugins property's structure has been changed. Here's an example elaborated with a multipage setup:

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

How disable link (async module) prefetch / preload by default with Vue CLI 4.3?

1 Answers1