Как динамично подгружать компоненты, без использования vue-router?

Question

[Лаврентий]

Подскажите если у меня проект без vue-router (не SPA). Собирается в Webpack.
И вроде бы сам проект небольшой, но итоговый файл js собирается приличный. Получается, что всё скомпилировалось в один JS, и т.к. страницы грузятся с перезагрузкой он каждый раз загружает его.

При использовании vue-router на проектах, как то не задумывался, там компоненты подгржались динамично в зависимости от роута. А сейчас получается я загружаю одну страницу, но весь JS грузится на каждой страницы со всеми компонтами которые по сути мне и не нужны.

Подскажитекак праваильно организовать.

Answer 1

[Aetae]

Подгрузка компонентов не зависит от vue-router'a, а зависит от того как ты их подключаешь.

components: {
  some: () => import('@/components/some.vue')
}

или

Vue.component('some', () => import('@/components/some.vue'));

И компонент some будет загружен только тогда, когда потребуется.

Ну и цельный бандл - он кешируется, при перезагрузках страниц ничего больше заново не грузится. С точки зрения отзывчивости интерфейса как раз выгоднее когда всё загружается сразу, а потом лежит в кэше. Разбивать стоит если бандл слишком разжирнел и первоначальная загрузка сказывается на UX и\или если в приложении множество кусков которые могут быть в принципе не использованы в тех или иных поведенческих сценариях.

Comments

[Лаврентий]

Спасибо за разъяснение