Question

我开始进入渐进式Web应用程序环境，我正在使用ASP.NET 4.6和MVC5来使用Polymer Single Page App。我想知道我应该在App Shell中包含哪些内容？

到目前为止，我已经将应用程序位置，app-route，app-toolbar，app-drawer-layout与Polymer硫化相结合。文件大小为266 KB，我在第一次加载时注入HTML内联。

这只会在视觉上加载导航栏。导航栏需要一个纸质选项卡元素和我的自定义登录元素。我应该把它们包括在第一次装载中吗？

其他一切都是懒惰的。

Answer 1

只包括您要使用的内容。如果你没有你需要的东西，那么只要你意识到自己需要它就可以添加它。

如果你想变得非常复杂，可以使用 this.importHref 延迟加载聚合物元素。但是，在延迟加载元素时必须要小心，因为它们可能依赖于最终延迟加载的其他聚合物元素，从而创建了必须加载的长链元素。

尝试并保留您在应用初始加载时经常使用的元素，以及仅在应用中的某些位置使用一次或两次的延迟加载元素。

Answer 2

以下是我在之前的回答中解释过的一个例子。

假设您构建了一个名为 lazy-element 的元素，您希望延迟加载。它位于 http://example.com/lazy-element.html 。这是一种可以加载它的方法。

在当前元素中引用 lazy-element 。

<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);
}

我应该在Polymer App Shell中包含哪些内容？

2 个答案: