按需加载聚合物元素

我试图减少需要加载很多元素的聚合物页面的加载时间。因此，考虑如何根据需求加载元素，意味着一旦我在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

按需加载聚合物元素

回答

相关问题