Удаление белого пустого содержимого, мерцающего при первой загрузке (среда Quasar)
Я использую предварительно обработанный контент для показа пользователям до того, как приложение было визуализировано Vuejs. Я замечаю, что проблема с квазар-фреймворком при первой загрузке - мерцание пустого белого содержимого.
Это шаги воспроизведения:
- Подготовка: используйте инструмент разработчика Chrome для моделирования медленной сети 3G, затем откройте панель "Элемент" для проверки DOM.
- Введите URL моего сайта, затем посмотрите DOM: Ваш index.html имеет q-app с предварительно обработанным содержимым:
<div id="q-app"> <h1>My prerender content here</h1> </div>
- [плохо] Следующие несколько секунд, когда будут загружены файлы app..js + vendor..js, квазар выполнит и изменит DOM на (только html-комментарий внутри):
<div id="q-app"> <!----> </div>
И мой экран теперь был ужасно белым пустым.
- Наконец, через несколько секунд приложение квазара было перерисовано:
<div id="q-app"> <div class="q-layout"> ... This is rendered content ... </div> </div>
Как я тестировал: время между этапом 3 и этапом 4 составляет ~1 с в моделировании быстрого 3G и>600 мс в нативном веб-представлении Android / IOS. Это показывает белый пустой экран в то время.
Я протестировал другой проект vue-cli, и у него не было шага 3. Нет проблем.
Итак, как я могу удалить шаг 3 в квазаре?