Что я должен включить в свою оболочку Polymer App?

Я начинаю останавливаться на среде Progressive Web App, я использую ASP.NET 4.6 и MVC5 для подобных приложений с Polymer Single Page App. Мне было интересно, что я должен включить в мою оболочку приложения?

До сих пор я включал расположение приложения, маршрут приложения, панель инструментов приложения, макет приложения-ящика с вулканизацией Полимера. Размер файла составляет 266 КБ, и я вставляю встроенный HTML-код при первой загрузке.

Это будет загружать только визуально загрузить навигационную панель. Для панели навигации нужен элемент paper-tab и мой пользовательский элемент login. Должен ли я включить их в первую нагрузку?

Все остальное лениво загружено.

2 ответа

Решение

Вот пример того, что я объяснил в моем предыдущем ответе.

Допустим, вы создали элемент с именем lazy-element, который хотите загружать с отложенной загрузкой. Он находится по адресу http://example.com/lazy-element.html. Вот способ, которым вы могли бы загрузить его.

Ссылка на ленивый элемент в вашем текущем элементе.

<lazy-element></lazy-element>

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

_loadElement: function(pathToElement) {
  this.importHref(pathToElement, function() {
    console.log(pathToElement + ' loaded');
  }.bind(this), function() {
    console.warn(pathToElement + ' failed to load');
  }.bind(this));
}

Теперь вызывайте эту функцию, загружая lazy-element, когда вы хотите, чтобы lazy-element активировался в вашем проекте. Возможно, вы захотите активировать его через 5 секунд после того, как ваш проект будет готов.

ready: function() {
  window.setTimeout(function() {
    this._loadElement('http://example.com/lazy-element.html');
  }, 5000);
}

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

Если вы хотите быть действительно сложным, вы можете лениво загружать полимерные элементы, используя this.importHref. Тем не менее, вы должны быть осторожны при ленивой загрузке элементов, потому что они могут зависеть от других полимерных элементов, которые в конечном итоге загружаются лениво, создавая длинную цепочку элементов, которые должны быть загружены.

Старайтесь сохранять элементы, которые вы часто используете, при начальной загрузке приложения, и отложенные элементы загрузки, которые используются только один или два раза в определенных местах приложения.

Другие вопросы по тегам