问我应该包括什么在我的聚合物应用程序外壳？

EN

以下是我在上一个答复中所解释的例子。

假设您构建了一个名为懒惰元素的元素，您想要延迟加载它。它位于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));
}

现在，当您想让惰性元素在项目中激活时，调用这个函数加载惰性元素。也许你想让它在你的项目准备好后5秒钟激活。

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

只需包括你将要使用的东西。如果你没有你需要的东西，那么当你意识到你需要它的时候，就把它加进去。

如果你想变得非常复杂，你可以用this.importHref来懒惰地负载聚合物元素。但是，当延迟加载元素时，您必须小心，因为它们可能依赖于其他聚合物元素，这些聚合物元素最终会被延迟加载，从而产生一个必须加载的长链元素。

尝试并保留在应用程序的初始加载中经常使用的元素，以及只在应用程序的特定位置使用一次或两次的延迟加载元素。