Angular 2 Начальная загрузка

Я попытался изо всех сил принести размер пакета Angular 2 и был относительно успешным в уменьшении размера до ~ 300 кб (Angular 2 + jquery + bootstrap + некоторые другие небольшие сторонние библиотеки), используя Browserify + Rollup + Minify + GZIP, но даже с этим размером все еще требуется некоторое время, чтобы загрузить пакет, а затем началось начальное время загрузки для отражения и zone.js, что означает может занять до 4-5 секунд на более медленных устройствах (мобильных телефонах) для загрузки сайта.

Хотя я понимаю, что это неизбежно (на данный момент, по крайней мере), есть ли способ показать ход загрузки для начальной загрузки в процентах от загрузки download/reflection/zone.js?

Большинство примеров здесь:

<body>
   <my-app>Loading...</my-app>
</body>

Что работает, а Loading... может быть заменен счетчиком или любым настраиваемым шаблоном, который можно выбрать, но есть ли способ получить реальный прогресс значимым образом?

То, что я ищу, - это что-то вроде Gmail загрузки прогресса, который является фактическим индикатором выполнения с min/max, а не некоторым неопределенным счетчиком, чтобы пользователи могли иметь некоторую форму указания относительно того, сколько времени им нужно будет ждать для загрузки сайта.

Большое спасибо заранее,

Обновление (24-Oct-2016)

Я начал использовать NGC для компиляции вовремя (https://angular.io/docs/ts/latest/cookbook/aot-compiler.html), которая немного ускорилась ( хотя размер пакета увеличился до ~ 500 тыс. фунтов стерлингов, но он по-прежнему занимает ~ 300 мс, чтобы загрузить веб-сайт после того, как все было загружено.

В идеале, я хотел бы иметь возможность перехватывать процесс загрузки и загрузки, исследовать их статус (например, 230kb/500kb, загруженный или 10% полного построения модуля), а затем загружать индикатор выполнения и строку состояния что на самом деле дает некоторые указания пользователю, что именно они ждут.

В настоящее время я загружаю минимальный CSS для индикатора выполнения, показываю его, а затем загружаю все Angular вещи по порядку функции onLoad, и пока он намного более плавный, чем раньше, он все еще не очевиден сколько времени пользователю придется ждать - от половины до нескольких секунд в зависимости от подключения к Интернету и возможностей устройства.

Ответ 1

Я не уверен в отношении /zone.js, но для загрузки мы можем следить за этим

<body onload="showApp()">
    <div class="progress-bar" id="loadingContainer"></div>
    <my-app style="display: none"><my-app>
</body>

showApp() {
    document.getElementById('loadingContainer').style.display = "none";
    document.getElementsByTagName('my-app')[0].style.display = null;
}

Ответ 2

Вы можете попробовать добавить второй script в свой index.html, который затем загрузит все ваши другие файлы (как это делает index.html). Тогда у вас будет куча запросов AJAX для ваших файлов и их можно добавить в DOM. Чтобы отслеживать прогресс, вы можете попробовать использовать HTTP HEAD-запрос с заголовком Content-Length.