vue-cli 4.3.1 как отключить предварительную выборку

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, созданных для асинхронных фрагментов (в результате разделения кода по требованию с помощью динамического импорта ()).

Подсказки вводятся с помощью @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');
  },
};