Vue Lazy load / асинхронная загрузка компонентов при начальной загрузке - PullRequest
Новая
       40

Vue Lazy load / асинхронная загрузка компонентов при начальной загрузке

0 голосов
/ 22 мая 2019

Я пытаюсь заставить ленивые блоки load / async .js работать в приложении Vue.

Я создал VUE проект с 

vue create project

Теперь в маршрутизаторе и представлениях, где я хочу загрузить компоненты, я использую синтаксис 

component: () => import('path/to/component')

Разбиение на куски работает, я получаю 0.js, 1.js и т. Д., И когда я нажимаю на соответствующую ссылку, где нужен компонент или маршрут, он загружает этот чанк.

Проблема в том, что когда я вначале загружаю первую страницу, она в любом случае загружает все чанки 0.js .... 5.js и т. Д., И когда я нажимаю на ссылку, для которой требуется, например, 2.js, она загружает ее снова.

Для сборки / обслуживания я использую vue-cli по умолчанию 

npm run serve

Я пытался использовать router.onReady (), но он по-прежнему загружает все чанки на начальной странице / странице входа, даже если компоненты не нужны.

Заранее спасибо

1 Ответ

0 голосов
/ 22 мая 2019

Хорошо, поэтому, поработав с ним в течение некоторого времени, мне удалось выяснить, что это функция предварительной выборки.

Итак, после создания vue.config.js в корневом каталоге проекта и ввода 

module.exports = {
  chainWebpack: (config) => {
    config.plugins.delete('prefetch');
  }
};

получил это работает. Поскольку каждый компонент занимает примерно 50 КБ, это экономит полосу пропускания.

...