2015-07-09 2 views
11

У нас есть приложение Angular + Ionic, которое мы планируем запустить через Кордову, но имеющее проблему с производительностью, которую мы пытаемся отслеживать.Angular + Ionic Загрузка всего содержимого через XHR

То, что мы видим в Chrome Dev вкладке Инструменты сети при запуске локально или на встроенном приложении, является следующим:

  • Дубликата погрузки CSS
  • запросы XHR, чтобы получить файл каждого шаблона наших Угловые ссылки пользовательского интерфейса маршрутизатора, чтобы, не побывав маршрутов пока

в качестве примера:

enter image description here

И линия 3167 (обозначен звездочкой) из angular.js источника:

append: function(element, node) { 
    var nodeType = element.nodeType; 
    if (nodeType !== NODE_TYPE_ELEMENT && nodeType !== NODE_TYPE_DOCUMENT_FRAGMENT) return; 

    node = new JQLite(node); 

    for (var i = 0, ii = node.length; i < ii; i++) { 
     var child = node[i]; 
     element.appendChild(child); * 
    } 
}, 

Я никогда не видел ничего подобного - мы проверили все основы (дублировать скрипт/CSS включает в себя, и т. д.), отключенное ионное кэширование и т. д.

Я собираю вещи до шпилек, чтобы увидеть, что может быть причиной этого, но надеемся, что кто-то еще это увидит и может предложить некоторые советы о том, где начать искать.

UPDATE

Дубликат CSS, как представляется, из-за наш файл index.html, который бутстрэпы нашей Угловая App неправильно указала как состояние в конфигурации интерфейса маршрутизатора.

Таким образом, проблема с корнем - ложные/неожиданные приводы XHR для всех статических файлов в приложении (угловые шаблоны ui, шаблоны директив).

+0

Зачем ваш index.html перезагружается с помощью запроса XHR? –

+0

@AndrewMcGivery - обновленный вопрос - UI Router неправильно указывал на файл index.html, и все в маршрутизаторе получает «предварительно загружен» через XHR –

+1

Недостаточно информации для диагностики проблемы. Можете ли вы воспроизвести проблему в Plunker? – Phil

ответ

4

Ну, когда состояние активировано, шаблоны автоматически вставляются в ui-представление его шаблона родительского состояния.

Вы должны проверить, как вы определили свои состояния. И/или делиться своими определениями состояния с нами :)

5

Способ, которым я занимаюсь с шаблонами html, заключается в том, чтобы кэшировать их все во время компиляции с использованием шаблонов gulp-ng или grunt-angular-templates (в зависимости от того, какой вкус менеджера задач вам как и сейчас).

Поскольку мы имеем дело с приложениями, контент должен быть более загруженным, а не ленивым (пока вы считаете их общий размер в МБ), тем самым сохраняя некоторую пропускную способность и улучшая общий пользовательский интерфейс. Кроме того, это может просто исправить вашу проблему.

Красота кеширования шаблонов во время компиляции заключается в том, что вашей реализации не нужно знать, откуда они (сервер или слой кеширования), и, следовательно, вам не нужно менять какой-либо код.

P.S. Я понимаю, что мой ответ не исправит вашу актуальную проблему, но он может одновременно решить только две проблемы.

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