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

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

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

Подскажитекак праваильно организовать.
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
Aetae
@Aetae
Тлен
Подгрузка компонентов не зависит от vue-router'a, а зависит от того как ты их подключаешь.
components: {
  some: () => import('@/components/some.vue')
}
или
Vue.component('some', () => import('@/components/some.vue'));

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы