Я попытался изо всех сил принести размер пакета 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, и пока он намного более плавный, чем раньше, он все еще не очевиден сколько времени пользователю придется ждать - от половины до нескольких секунд в зависимости от подключения к Интернету и возможностей устройства.
Я не уверен в отношении /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;
}
Вы можете попробовать добавить второй script в свой index.html, который затем загрузит все ваши другие файлы (как это делает index.html).
Тогда у вас будет куча запросов AJAX для ваших файлов и их можно добавить в DOM. Чтобы отслеживать прогресс, вы можете попробовать использовать HTTP HEAD-запрос с заголовком Content-Length.