0

Есть сайт, который состоит из:

1) прелоадера, который отсчитывает прогресс загрузки видео из пункта №2 2) видео, которое запускается после прелоадера 3) страница роутера

Прелоадер сейчас реализован, как компонент всего SPA на Vue.js.

У прелоадера более 400 строк кода HTML, JS, CSS так как присутствует сложная анимация.

js Бандл проекта весит 1.5 мб и на плохом интернете прелоадер появляется только после загрузки app.js, то есть может пройти 40 секунд до появляения прелоадера.

Вопрос: как разделить бандл на 2 части, чтобы грузился сначала preloader.js, а потом app.js и при этом я мог из этих двух банлов в друг друга передавать переменные.

1 ответ 1

0

Я так понимаю, что дело в том, что пока не загрузиться код js, ничего не отображается, а это может занять и продолжительное время. Это проблема довольно таки известная и имеет уже готовое решение - директива v-cloak. Эта директива используется для оторажения html, который показывает до того, как начнется выполнение кода js, и скрывается перед началом его выполнения.

Если же Вам нужно именно разделить код на несколько частей, то есть вариант с динамическим компонентом. Т.е. возможно выделить компонент как отдельно подгружаемый, и до его полной загрузки выполнять основной код независимо от этого компонента. Понятно, что код без этого компонента будет меньше по объему и загрузиться быстрее. Данные же возможно передавать стандатно через свойства. Так же в таком случае в Ваших руках будет полностью весь процесс загрузки компонента, Вы сможете загружать его там и тогда, где он на самом деле необходим.

Еще есть вариант с ленивой загрузки путей, но, возможно, он Вам не подойдет: тут получается так, что отдельная страница подгружается перед переходом на нее, т.е. есть несколько bandl`ов, которые подгружются динамически при измении пути в компоненте vue-router. Из плюсов то, что этот метод уже заранее подготовлен и количество изменений, которые необходимо внести в проект минимальны.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.