What is the best way to implement a preloader?

Question

Vue.js

The project is written in Vue.js, the preloader is also inside the project.
The preloader is launched before the content appears, and determines the size of the video file on the page (6 mb). I hide it only when the video is fully loaded.
On the Internet above 1 MB everything is OK!
On the Internet below 1 mb, the browser waits until the entire app.js is loaded and only then the preloader is shown, since it is part of the Vue.js project.
I see a solution to the problem by moving the preloader separately from Vue.js, but the catch is that all the logic of the preloader is written in Vue.js, and there is not just a circle, but a complex animation using GreenSock.
The question is how to correctly render the component so that I have 2 files loaded:
- preloader.js
- app.js
But at the same time, to have all the features of Vue.js in preloader.js?
PS I don't want to add Vue.js to the HTML script tag.

Answer 1

Probably should be divided into more bundles:
1. packages with vue and others common to preloader and the rest of the application,
2. packages, with everything that is needed only for the preloader
3. preloader
4. packages for the rest of the application, except for the preloader (lazy loading)
5. the rest of the application (lazy loading)
By default, hide the main component (display: none) and show already in the mounted preloader.
1, 2 and 4 are needed for caching with the user (so as not to re-load with a fixed version of the packages)