Как отключить prefetch в vue\nuxt и зачем это нужно

vue nuxt отключаем prefetch

По умолчанию Vue\Nuxt помогают нам оптимизировать загрузку наших чанков и подставляют скриптам на странице rel=prefetch\preload, чтобы браузер мог подгрузить их заранее, подробнее про prefetch здесь. В небольших приложениях это не вызывает проблем, но с ростом приложения вы можете столкнуться c проблемой просадки FCP, как с этим бороться, расскажу на своем примере из работы сайта biglion.ru

Под капотом биглиона работает vue в SSR режиме на fastify — подробный гайд, как поднять SSR в vue² уже есть в нашей ленте. Так вот при росте приложения, рос и javascript, количество подключаемых файлов только росло, как и функциональность всего биглиона, хотя количество яваскрипта необходимое для загрузки страницы оставалось +- таким же.

Скриншот, с количеством загружаемых файлов на странице от биглиона — Скриншот, с количеством загружаемых файлов на главной странице от биглиона

Для vue ssr приложения отключение prefetch будет происходить в параметрах createRenderer . На проекте эта логика расположена в server.js

function createRenderer(bundle, options) { 
  return vueRenderer.createBundleRenderer(bundle, Object.assign(options, { 
    cache: new LRU({ max: 10000, maxAge: 1000 * 60, }), 
    basedir: resolve('./dist'), 
    runInNewContext: false, 
    shouldPrefetch: (file, type) => { return false; }, 
    clientManifest, }
  ));
}

Решением проблемы в моем случае это добавление

shouldPrefetch: (file, type) => { return false; },

После добавления параметра количество скриптов сократилось до 34 итого -21 скрипт

Для разработчиков использующих vue через vue-cli решение будет в виде добавления параметров в vue.config

config.plugins.delete('prefetch') 
config.plugins.delete('preload')

В Nuxt2 все немного сложнее, но тоже есть инструменты для управления prefetch\preload — например отключение prefetсh для nuxt-link

<nuxt-link :to="`/home/${home.objectID}`" no-prefetch=""> <home-card :home="home"> </home-card> </nuxt-link>

В nuxt.config.js можно отключить prefetch глобально

router: { prefetchLinks: false }

Если есть чем дополнить статью или появились вопросы — welcome в комментарии.

p.s. Если у вас проблема с nuxt³ и загрузкой всех ассетов как prefetch — ознакомьтесь с этим github issue. На момент написания статьи, баг в nuxt³ был исправлен 7 часов назад.

Последняя редакция 3 февраля, 2023 в 07:02