Angular 6 Показать прогресс загрузки приложения - PullRequest
Новая
       6

Angular 6 Показать прогресс загрузки приложения

0 голосов
/ 13 мая 2018

У меня небольшой проект с пакетами (angular cdk, angular material и firebase). Тем не менее у меня есть встроенный vendor.js файл с размером 4 MB.

В качестве подхода к решению проблемы я хочу показать прогресс загрузки при медленных соединениях (загрузка до 4 МБ занимает до 2 минут), чтобы пользователи могли видеть загрузку приложения.

Я установил PWA и service-worker, чтобы приложение не перезагружалось каждый раз.

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

Попробуйте рассчитать% загрузки, загрузив JS-файл в запросе AJAX , как здесь , и покажите это число в вашем индикаторе выполнения.

0 голосов
/ 14 мая 2018

Чтобы ответить на вопрос: нет простого способа показать пользователю, как долго он должен ждать загрузки приложения, но вы можете показать ему простую анимацию.

Просто включите некоторые CSS-анимации в ваш index.html. Все внутри app-root будет заменено приложением после запуска. 

<!-- index.html -->
  <!doctype html>
  <html>
    <head>
      <style>
        .spinner {
          height: 200px;
          width: 200px;
          animation: rotate 2s linear infinite;
          transform-origin: center center;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }
        @keyframes rotate {
          100% {
            transform: rotate(360deg);
          }
        }
      </style>
    </head>
    <body>
      <app-root> <!-- selector from app.component.ts -->
        <!-- loading layout replaced by app after startupp -->
        <svg class="spinner" viewBox="25 25 50 50">
          <style type="text/css">
            circle{stroke:url(#MyGradient)}
          </style>
          <defs>
            <linearGradient id="MyGradient">
              <stop offset="5%" stop-color="#F60" />
              <stop offset="95%" stop-color="#FF6" />
            </linearGradient>
          </defs>
          <circle class="path" cx="50" cy="50" r="20" fill="none" stroke- 
          width="2" stroke-miterlimit="10"/>
        </svg>
      </app-root>
    </body>
  </html>

Основано на этом учебном пособии .

Кроме того, как сказал maxime1992, вы должны использовать Angular в режиме Production для минимальных размеров файлов.

...