我应该在我的 Polymer 应用程序 Shell 中包含什么？

Question

我开始深入研究渐进式 Web 应用程序环境，我正在使用 ASP.NET 4.6 和 MVC5 来处理类似 Polymer 单页应用程序的问题。我想知道我应该在我的应用程序中包含什么 Shell?

到目前为止，我已经包含了 app-location、app-route、app-toolbar、app-drawer-layout，并使用 Polymer 硫化。文件大小为 266 KB，我在第一次加载时插入 HTML 内联。

这只会加载视觉加载导航栏。导航栏需要一个 paper-tab 元素和我的自定义登录元素。我应该把它们包括在拳头负载中吗？

其他一切都是延迟加载的。

Answer 1

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

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

尽量保留在应用的初始加载中经常使用的元素，并延迟加载仅在应用的特定位置使用一次或两次的元素。

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

我应该在我的 Polymer 应用程序 Shell 中包含什么？

What should I include in my Polymer App Shell?

asp.net-mvc

polymer

progressive-enhancement

progressive-web-apps