1

我开始专注于 Progressive Web App 环境，我正在使用 ASP.NET 4.6 和 MVC5 以及 Polymer Single Page App。我想知道我的 App Shell 中应该包含什么？

到目前为止，我已经包含了应用程序位置、应用程序路由、应用程序工具栏、应用程序抽屉布局，并使用了 Polymer 硫化。文件大小为 266 KB，我在第一次加载时注入了 HTML 内联。

这只会在视觉上加载导航栏。导航栏需要一个纸标签元素和我的自定义登录元素。我应该将它们包含在第一个负载中吗？

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

4

2 回答 2

3

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

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

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

于 2016-08-02T02:16:59.837 回答
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));
}

现在，只要您希望在项目中激活惰性元素，就调用此函数加载惰性元素。也许您希望它在项目准备好 5 秒后激活。

ready: function() {
  window.setTimeout(function() {
    this._loadElement('http://example.com/lazy-element.html');
  }, 5000);
}
于 2016-08-02T21:25:04.537 回答