Poylmer app shell和延迟加载

时间:2017-04-15 14:00:23

标签: polymer

我有一个类似于Polymer shop-app的projet设置。为了减少应用程序本身的thr代码库,我将孔主页面布局拆分为separete元素项目。该项目有一个元素 self.view.setNeedsLayout(),它加载了7个Dependencys lazy:

Layout

与Shop-app exmaple基本相同的逻辑。_pageLoaded: function (shouldResetLayout) { this._ensureLazyLoaded(); ... } _ensureLazyLoaded: function () { if (!this.loadComplete) { Polymer.RenderStatus.afterNextRender(this, function () { this.importHref(this.resolveUrl('lazy-resources.html'), function () { this.loadComplete = true; }, null, true); }); } }, 是我Shop-app的双向数据绑定页面属性的观察者。

在我的Shop-app本身中,我包含_pageLoaded元素,如下所示:

layout

并且在应用程序本身中也有一些懒惰的资源,其加载方式与<link rel="import" href="../bower_components/lc-app-layout/lc-app-layout.html"> <lc-app-layout categories="[[categories]]" page="[[page]]" category-name="{{categoryName}}"> <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible"> <!-- home view --> <shop-home name="home" categories="[[categories]]"></shop-home> <!-- list view of items in a category --> <shop-list name="list" route="[[subroute]]" offline="[[offline]]" query-Params="[[queryParams]]"></shop-list> <!-- detail view of one item --> <shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail> </iron-pages> </lc-app-layout> 相同。

现在,当我想构建所有内容时,我需要将layout元素的lazy-resurces作为片段添加到layout,以便分析器找到它的依赖项:< / p>

Polymer.json

否,当我提供此版本时,页面大多数时间都不会加载。它显示如下错误:

"fragments": [
"src/view/list/shop-list.html",
"src/view/detail/shop-detail.html",
"src/lazy-resources.html",
"bower_components/lc-app-layout/lazy-resources.html"

当我限制网络速度时,每次加载的可能性都会更高。所以我假设异步ImportHref中存在一些时序问题或类似的问题。或者我只是错过了使用碎片告诉分析仪扫描我Cannot read property '_makeReady' of undefined Polymer is not a function Cannot read property 'isDescendant' of undefined 元素的资源?

我正在使用Polymer-CLI 0.18.0。使用layout运行应用程序确实可以正常工作。

1 个答案:

答案 0 :(得分:1)

通过将延迟加载从layout元素移动到Shop-app的lazy-ressource来解决问题。