Проект написан на Vue.js, прелоадер тоже внутри проекта.
Прелоадер запускается перед появлением контента, и определяет размер видео файла на странице (6 мб). Скрываю его только когда видео загружено полностью.
На интернете выше 1 мб всё ок!
На интернете ниже 1 мб браузер ждет пока загрузиться весь app.js и только тогда показывается прелоадер, так как он часть Vue.js проекта.
Решением проблемы вижу вынесение прелоадера отдельно от Vue.js, но загвоздка в том, что вся логика прелоадера написана на Vue.js, а там не просто кружок, а сложная анимация с использованием GreenSock.
Вопрос, как правильно вынести компонент, чтобы у меня загружалось 2 файла:
- preloader.js
- app.js
Но при этом, чтобы в preloader.js были все возможности Vue.js?
P.S. добавлять Vue.js в HTML тег script не хочется.
Вероятно следует разделить на большее количество бандлов:
1. пакеты с vue и другими общими для прелоадера и остального приложения,
2. пакеты, со всем, что необходимо только для прелоадера
3. прелоадер
4. пакеты для остального приложения, кроме прелоадера (отложенная загрузка)
5. остальное приложение (отложенная загрузка)
Основной компонент по умолчанию скрыть (display: none) и показывать уже в mounted прелоадера.
1, 2 и 4 нужны для кэширования у пользователя (чтобы повторно не грузить при зафиксированной версии пакетов)
Антон Антон Спасибо за развернутый ответ Антон. Подскажи, а есть пример, где что-то подобное реализовано или хотя бы посмотреть небольшой кусок, чтобы понять в каком направлении двигаться. У меня нет понимания, как разделить всё :(
Антон Антон Антон, подскажи пожалуйста, а могу ли я передать данные из бандла прелоадера в бандл App? К примеру переменную preloader которая по умолчанию true, заменить на false?
Антон Антон, я разнес, и делаю commit в компоненте App, чтобы закончилось действие прелоадера, но в store меняется значение, и в компоненте App менятеся, а в прелоадер нет. Хотя computed с возвратом значения this.$store.state.preloader стоит.
Простой