How to divide the script collected into a single file into modules (roles in the application) in SPA?

Question

Vue.js

1) I develop SPA on Vue & Laravel.

The application has several roles:
1) Admin
2) Teacher
3) Student

At the moment, webpack collects all scripts into a single file.

There were several questions:
1) When you go to the site, an authorization window opens, along with it, scripts are loaded related to and for authorized users.

Is it possible to compile a separate file for authorization scripts, for example, to create auth.js and app.js? correct and is there any other solution.

2) If you enter, for example, as a Student, the application loads a complete compiled file, which contains scripts for admins and teachers. Is it possible to make it so that instead of all scripts being collected in one file, they are divided by roles (admin.js, teacher.js, student.js)

Thank you for your attention.

Answer 1

Articles that helped solve this problem:
https://itnext.io/vue-js-app-performance-optimizat...
https://alexjover.com/blog/lazy-load-in-vue-using-...