There is a site that consists of:

1) a preloader that counts the progress of video download from point 2 2) video that starts after the preloader 3) router page

The preloader is now implemented as a component of the entire SPA on Vue.js.

The preloader has more than 400 lines of HTML, JS, CSS code as there is a complex animation.

js Bundle project weighs 1.5 mb and on a bad internet preloader appears only after downloading app.js, that is, it can take 40 seconds before the preloader appears.

Question: how to divide the bundle into 2 parts so that preloader.js is loaded first, and then app.js and at the same time I could transfer variables from these two banals to each other.

    1 answer 1

    I understand that the fact is that until the js code is loaded, nothing is displayed, and this can take a long time. This problem is pretty well-known and has a ready-made solution - the v-cloak directive. This directive is used to display html, which shows before the execution of the js code begins, and is hidden before the start of its execution.

    If you need to divide the code into several parts, then there is an option with a динамичСским ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ . Those. It is possible to select a component as a separately loadable one, and, before it is fully loaded, execute the main code independently of this component. It is clear that the code without this component will be less in volume and load faster. Data is also possible to transfer standard through properties. Also in this case, in your hands will be completely the entire process of downloading the component, you can download it there and then, where it is actually needed.

    There is also an option with Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΏΡƒΡ‚Π΅ΠΉ , but perhaps it will not work for you: it turns out that a separate page is loaded before going to it, i.e. There are several bandl`ov that are loaded dynamically when changing the path in the component vue-router. One of the advantages is that this method has already been prepared in advance and the number of changes that need to be made to the project is minimal.