TL; DR: по умолчанию проекты на основе Vue CLI предварительно выбирают все, и вы можете отключить это.

Я начал работать с Vue пару месяцев назад. За это время у меня была возможность познакомиться с ним достаточно хорошо, и до сих пор мне это очень нравится, это действительно упрощает задачу, но, как и во всем остальном, есть некоторые вещи, которые не так просты, как кажется, и у нас есть чтобы глубже погрузиться в структуру, чтобы заставить их работать.

Так обстоит дело с отложенной загрузкой, и я рад, что это было не так просто, потому что у меня была возможность изучить некоторые действительно интересные концепции, о которых я не знал, и которыми я рад поделиться с вами сейчас. .

Я наткнулся на идею отложенной загрузки в Vue, когда читал документацию по маршрутизатору Vue, где объясняется, как использовать асинхронные компоненты и динамический импорт для разделения наших представлений на отдельные фрагменты и, цитирую, «загружать их только при посещении маршрута». Как вы, наверное, догадались, судя по тому, как я выделил эту фразу и заголовок поста, это не работает.

Сначала я не осознавал или не особо заботился, я только начинал с Vue, пытаясь понять всю его мощь и мощь, и мне было далеко до того, чтобы сомневаться в священных документах, поэтому я сделал то, что мне объяснили. там я увидел, что сборка генерирует отдельные фрагменты для каждого представления, что мне показалось довольно крутым, и перешел к поиску следующей интересной функции.

Через пару месяцев проект стал довольно большим из-за наличия тяжелых графических библиотек, и время загрузки сайта стало приоритетной проблемой, которую необходимо было решить. Итак, теперь я обратил внимание на то, что предполагаемая «ленивая загрузка» была такой же ложью, как и торт. Дело в том, что код разделялся, да, но каждый фрагмент загружался во время загрузки страницы и не только это, они загружались дважды !! Не такой уж и ленивый, да? Ты так жаждешь внезапной вью? расслабься, чувак ..

По умолчанию все фрагменты загружаются во время загрузки страницы.

В итоге, начиная с Vue CLI 3, они добавили плагин, который по умолчанию заставляет страницу загружать все фрагменты при загрузке страницы, что, честно говоря, технически ленивая загрузка (хотя и не мой тип ленивых) и, возможно, хорошая функция, если ваши файлы небольшие и / или есть большая вероятность, что эти файлы понадобятся в любом случае позже, поскольку они загружаются после отображения страницы и во время простоя браузера. Но если, наоборот, у вас есть много фрагментов, которые, вероятно, не понадобятся в данной навигации, и, как в этом случае, некоторые из них огромны, вы захотите отключить эту функцию «. ”.

Сделать это так же просто, как добавить это в свой vue.config.js:

// vue.config.js
chainWebpack: (config) => {
  config.plugins.delete(‘prefetch’)
}

Вы по-прежнему можете использовать предварительную выборку с помощью директивы webpackPrefetch, которая более подробно объясняется в документации Webpack, а именно:

import(/* webpackPrefetch: true */ './views/About.vue');

Вот и все, вот как можно сделать загрузку действительно очень ленивой, если это все, что вам нужно, то вперед! Но если вам нужно немного больше информации о том, что происходило, давайте углубимся.

Плагин, который они добавили в Vue CLI 3, на самом деле использует не совсем новую веб-технологию под названием предварительная выборка ссылок (этот документ последний раз обновлялся в 2003 году), о которой вы можете найти много информации в межсетях, но вкратце это помогает избежать сокращения времени загрузки в будущих навигациях за счет предварительной выборки (кто бы мог знать!) ресурсов до того, как они действительно понадобятся.

Есть даже другая (и фактически новая) технология, называемая предварительная загрузка ссылок, которая похожа на предварительную выборку, но отличается приоритетом, с которым загружаются ресурсы. Предварительная загрузка более ленивая, чем предварительная загрузка.

Предварительную выборку следует использовать, когда ресурсы, вероятно, потребуются во время пребывания пользователя на странице, и предварительную загрузку, когда ресурс, вероятно, потребуется вскоре после загрузки страницы.

Здесь вы можете увидеть предварительную выборку в действии с конфигурацией Vue CLI по умолчанию, файл about.js включен, хотя я не посещал страницу about:

Помните, что я говорил ранее о двойной загрузке ресурсов? Посмотри на это:

Когда я впервые увидел это, я был очень сбит с толку и даже немного рассердился. Мало того, что я не мог видеть мою любимую ленивую загрузку, но еще и все, что я хотел ленивой загрузкой, загружалось дважды ?? Ты не в своем уме? Ты сошел с ума?!

Мне потребовалось немного больше времени, чем я хотел бы, чтобы понять, что этот механизм на самом деле предназначен для использования кеша браузеров… и я обычно разрабатываю с отключенным кешем. Ресурс загружает его во время простоя, так что, когда он действительно запрашивается (второй раз в инспекторе Chrome), он полностью готов в кеше, ожидая, когда вы возьмете его на обед или что-то еще.

Здесь вы можете увидеть, как он использует кеш при втором запросе:

Заключение

Вы должны оценить, что лучше всего для вашего проекта, оставив предварительную выборку по умолчанию, все будет загружено во время инициализации страницы, что во многих случаях не имеет большого значения, учитывая, что эти загрузки выполняются в фоновом режиме, но в этом нет необходимости, если вы знаете или мало шансов, что эти файлы понадобятся. С другой стороны, отключение предварительной выборки по умолчанию дает вам больше контроля над тем, что предварительно загружается или нет, и страница будет загружать только файлы, необходимые по запросу, не тратя ресурсы, но обратная сторона заключается в том, что могут быть задержки, когда эти файлы запрашиваются для первый раз (в будущих навигациях они будут кешироваться).