Polymer 按需加载聚合物元件

我试图减少聚合物页面的加载时间，因为它需要加载很多元素

因此，考虑按需加载元素，意味着一旦我在HTML代码中使用了元素，如果没有加载，就会立即加载

有人知道怎么做吗？

---

可能在使用未知HTML元素时触发了某些事件？因此，一旦发生这种情况，我可以使用importHref（）处理加载？

这取决于您的需要，没有标准的优化方法，但您可以使用硫化工具和测试性能

如果您不想在一个请求中加载所有网络组件，您可以在初始页面/视图中硫化所有需要的元素。因此，您将在一个请求中加载一组元素，并在第一个页面中使用它们

然后，您可以实现一个延迟加载，包括为每个webcomponent的head部分添加链接标记。通过这种方式，在浏览器的解析任务期间不会执行加载过程，因此不会阻塞。

可能对您有用：

<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>

---

我敢打赌把所有的东西都放在一个大文件里，然后用拉链拉上。最有可能的是，您的所有应用程序都不超过聚合物+基本ELT，所以用户不会注意到您是否添加了额外的20-40K。但是他们在下载每个elt之前肯定会注意到延迟，因为连接建立时间实例化等。尽管看到一些关于这方面的用户体验研究会很有趣。我建议将所有元素硫化并只加载一次。它可以通过硫化工具完成-这里有两个选项。您可以按照上面注释中的说明硫化元素，也可以延迟加载它们。有一个教程介绍了如何使用polymer创建应用程序，包括延迟加载元素。如果你搜索“聚合延迟加载”，还有很多。嗯，所有页面的所有我的元素仍然在第一页加载。我真的不明白这是怎么回事我已经一年多没用过聚合物了，但快速搜索给了我以下信息：

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