Laravel + Vue.js MPA (with code splitting)?

Question

webpack

Hey!
Is it possible to implement an MPA application using Laravel and Vue.js in such a way that each page of the project has only the code it needs, including various libraries.
For example:
Page1: vue.js (component1, component2, component3), slider.js, gallery.js;
Page2: vue.js (component2), gallery.js;
Page3: slider.js
Page4: vue.js(component1, component3).
If you create your own js-file for each page and import vue and libraries there, then there will be code duplication. If everything is done in one js file, then there will be code that is not needed for this or that page. Please correct me if there is a way to fix this.
Perhaps I don’t understand some principles, but I would like to break up the code as much as possible depending on the needs on the page, use vue components in conjunction with the usual layout in blade.
Please direct me in the right direction, it is possible to indicate which lessons, or explain what to do in this particular situation. Or maybe I don't understand something, and in this situation you need to use SPA?

Answer 1

Here you need to use the matryoshka method. You take a blade, you connect the vue components you need, registered in app.js, into it. These components can be a set of other components that are connected to it using import or written in app.js.