Угловой 2 Начальный ход загрузки

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

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

Большинство примеров там, как это:

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

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

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

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

Update (24-Oct-2016)

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

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

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

источник

2016-07-11 kha

Хороший вопрос, но я думаю, что общее решение (вы можете использовать rollup, кто-то другой может использовать webpack и т. Д.) Сложно? Вероятно, требуется некоторая помощь/api/hook в угловой, чтобы она тоже работала. –

Вы пробовали компиляцию AOT? (для оптимизации скорости) –

@redaigbaria у меня есть.Это определенно быстрее, но по-прежнему будет иметь индикатор прогресса со значимым статусом в течение 2 секунд или около того, он принимает более медленные устройства. – kha

Я не уверен, что отражают/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; 
}

источник

2016-10-23 17:40:06 Eswar

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

источник

2018-02-27 22:17:55

Угловой 2 Начальный ход загрузки

ответ

Смежные вопросы