按需加載聚合物元素

我試圖減少需要加載很多元素的聚合物頁面的加載時間。因此，考慮如何根據需求加載元素，意味着一旦我在HTML代碼中使用元素，如果未加載，則會立即加載。按需加載聚合物元素

任何人都有一個想法如何做到這一點？當使用未知的HTML元素時，可能會觸發一些事件？所以我可以使用importHref（）處理加載一次嗎？

2015-10-15 code2be

我對硫化在一個大文件中的所有東西，併爲它服務拉鍊投注。最有可能你所有的應用程序都不會超過Polymer + basic elts，所以用戶不會注意到你是否增加了額外的20-40K。但是，在下載每個elt之前，他們肯定會注意到延遲，因爲連接建立時間實例化等。 Althoug在此查看一些用戶體驗研究會很有趣。 – user656449

我會建議硫化所有元素並只加載一次。它可以通過硫化工具完成 - https://github.com/polymer/vulcanize – Nodarii

這裏有兩個選項。您可以按照上述註釋中的說明硫化元素，也可以懶加載它們。有一個教程[這裏]（https://aerotwist.com/blog/polymer-for-the-performance-obsessed/），講述如何用聚合物創建應用程序，包括延遲加載元素。如果您搜索「聚合物惰性負載」，那裏還有更多。 –

這取決於您的需求，沒有標準的優化方法，但您可以使用Vulcanize工具和測試性能。

如果您不想在一個請求中加載所有webcomponents，則可以在初始頁面/視圖中硫化所需的所有元素。因此，您會在一個請求中加載一組元素，並在第一頁中使用它們。

然後，您可以實現延遲加載，其中包括爲每個Web組件的頭部添加鏈接標記。通過這種方式，瀏覽器的解析任務期間不會進行加載過程，所以不會阻塞。

來源

2016-07-27 08:32:42

iron-lazy-pages可能對你有用：

<app-location route="{{route}}"></app-location> 
<app-route 
    data="{{route_data}}" 
    pattern="/:page" 
    route="{{route}}" 
></app-route> 

<iron-lazy-pages attr-for-selected="data-route" selected="{{route_data.page}}"> 
    <x-page1 data-route="page1" data-path="demo/x-page1.html"></x-page1> 
    <x-page2 data-route="page2" data-path="demo/x-page2.html"></x-page2> 
    <section data-route="page3"> 
     My inline element. 
    </section> 
</iron-lazy-pages>

您可以用下面的安裝：

bower install --save TimvdLippe/iron-lazy-pages

來源

2017-08-06 07:06:30 MattMS

按需加載聚合物元素

回答

相關問題