Как разделить собираемый в единый файл скрипт по модулям (ролям в приложении) в SPA?

Question

[itprogressuz]

1) Разрабатываю SPA на Vue & Laravel.

В приложении есть несколько ролей:
1) Админ
2) Учитель
3) Студент

На данный момент webpack собирает в единый файл все скрипты.

Появились несколько вопросов:
1) При переходе на сайт, открывается окно авторизации, вместе с ней загружаются скрипты связанные и для авторизованных пользователей. Есть ли возможность скомпилировать отдельно файл для скриптов авторизации, к примеру чтобы создались auth.js и app.js

Можно создать отдельную страницу для авторизации и уже когда пользователь авторизовался, перекидывать его в отдельную страницу(Кабинет), но хотелось бы узнать, насколько этот вариант правильный и есть ли другие варианты решения.

2) Если войти, к примеру, в роли Студента, приложение загружает полный скомпилированный файл, в котором есть скрипты для админов и учителей. Можно ли сделать так, чтобы вместо того, чтобы все скрипты собирались в один файл, они разделились по ролям(admin.js, teacher.js, student.js)

Спасибо за внимание.

Comments

[alex4answ]

TL; DR; отложенный/ленивый импорт называется то, что вам нужно (вопрос не читал)

Answer 1

[itprogressuz]

Статьи которые помогли решить данную проблему:

https://itnext.io/vue-js-app-performance-optimizat...

https://alexjover.com/blog/lazy-load-in-vue-using-...