#angular #angular-cli #angular7 #cloudflare #angular-cli-v6
#angular #angular-cli #angular7 #cloudflare #angular-cli-v6
Вопрос:
Проблема:
Angular загружает белый экран за несколько секунд до показа приложения. Это происходит только при 1 из 6 попыток загрузки веб-сайта, в основном, когда я закрываю браузер и снова открываю его, а затем захожу на свой веб-сайт.
Ожидаемый результат:
В большинстве случаев сам веб-сайт / приложение загружается в течение 1,6 секунды. Я в основном хочу, чтобы белый экран перестал отображаться случайным образом на 6-8 секунд. Это почти похоже на то, что веб-сайты переходят в спящий режим, но я получаю приличный трафик на веб-сайт.
Технология: Angular версии 7, AngularCLI, Cloudflare и хостинг с Firebase.
Информация:
Я получаю эти 4 странных желтых предупреждающих сообщения в консоли. Я не уверен, что это вызывает проблемы.
Снимок экрана ниже показывает, что я вижу в течение 5 секунд плюс:
Комментарии:
1. Вероятно, просто браузер загружает ресурсы (файлы скриптов). Обычно браузер кэширует их, особенно если версии совпадают (ie. имена файлов совпадают), но браузер может перезагрузить их с сервера, особенно если вы видите, что это происходит при повторном закрытии / открытии браузера. Альтернативой является то, что хостинг-сайт (т. Е. серверная часть) что-то делает, прежде чем он предоставит первую HTML-страницу.
Ответ №1:
Вы могли бы попробовать предварительно загрузить какой-нибудь легкий критический css, который показывает своего рода анимацию / заставку, пока ваш браузер загружает другие более тяжелые ресурсы с сервера. Это сократит время, которое занимает «белый экран», и создаст у пользователя впечатление, что веб-страница загружается и что-то происходит.
Кроме того, вы можете прочитать больше о предварительной загрузке здесь. Предполагая, что вы используете Angular, на вашем index.html внутри <head> тега:
<!-- preload css-->
<link rel="preload" as="style" onload="this.rel='stylesheet'" href="your-path/assets/preload.css">
И на вашем <body> вы отображаете какой-то счетчик, который отображается, пока браузер извлекает другие файлы скрипта.
<div class="app-loading">
<svg class="spinner" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
</svg>
</div>
Комментарии:
1. спасибо за ваши комментарии. Я выполнил предварительную загрузку с помощью css, но при первом получении файлов приложения все равно требуется 5 секунд с белым экраном. Затем после его кэширования, а затем сайты быстрее.
2. Ах, я вижу .. Хм .. У меня есть еще 2 решения для вас. 1) Service workers / PWA 2) Сжатие статических файлов в Gzip или Brotli. Вы пробовали какой-либо из них?
3. Я использую cloud flare для тех
4. Хм .. На вашем веб-сайте слишком много изображений? Вы можете рассмотреть возможность загрузки изображений webp вместо PNG / JPEG. Кроме того, как насчет настройки вашего webpack вместо использования настроек angular по умолчанию?
5. Да, настраивая ваш webpack, я имею в виду более эффективное разделение кода. Я просмотрел ваш веб-сайт и проверил его с помощью Google Lighthouse. Оценка не кажется слишком хорошей.. Хм, вы рассматривали возможность отложенной загрузки изображений не в вашем окне просмотра? Боюсь, это все, что я могу предложить на данный момент.. Вам также следует рассмотреть возможность использования сервисных работников