首页 文章

捆绑聚合物组件的最佳做法

提问于
浏览 次
1

Polymer dist /文件夹有一个HTML文件https://github.com/Polymer/polymer/tree/master/dist，带有HTML导入和脚本标记 . 大多数聚合物元素都不是提供像polymer.js这样的单一分布束文件并对那里可用的每种聚合物元素做同样的事情的良好做法吗？

这种方法有一些明显的优点：

1. Minimum http requests to get the polymer core or a polymer element. 
2. Easy to use for the clients, just include the required element.

示例：依赖于其他共享元素的元素，

- shared-element: /webcomponents/font-roboto/roboto.js
- custom-element1: uses shared-element
- custom-element2: uses shared-element

使用custom-element1和custom-element2的应用程序仅使用一个http请求下载/webcomponents/font-roboto/roboto.js一次 .

<script src="../webcomponents/webcomponentsjs/webcomponents.js"></script>
<script src="../webcomponents/custom-element1/custom-element1.js"></script>
<script src="../webcomponents/custom-element2/custom-element2.js"></script>

PS：上面的custom-element1.js与custom-element1.html做同样的事情，期望以编程方式加载和访问组件很方便 .

我想听听聚合物团队或其他聚合物开发商/用户关于解决这个问题的最佳实践 .

polymer

1 回答

  • 1

    如果我正确理解你，你想要的就是硫化 . 截至本文撰写时，对于聚合物1.0，说明如下：

    如果您有一个使用大量HTML导入的输入HTML文件elements.html，您可以按如下方式通过Vulcanize运行它：vulcanize elements.html -o elements.vulcanized.html -o或--output标志将将输出定向到名为elements.vulcanized.html的新文件 . 如果省略-o标志，Vulcanize会将输出打印到stdout，如果要将其传递给另一个命令，这可能很有用 . elements.vulcanized.html现在包含一个elements.html版本，其中所有导入的内联和依赖项都被展平 . 除了在JavaScript中设置的路径之外，任何URL的路径都会针对新的输出位置自动调整 . 您可以以标志的形式将其他选项传递给Vulcanize . 有关支持的标志的完整列表，请参阅官方的Vulcanize文档 . 这是上面的相同例子 . 额外的标志告诉Vulcanize去掉注释，并将外部脚本和CSS文件合并到硫化文件中 . vulcanize -o elements.vulcanized.html elements.html --strip-comments --inline-scripts --inline-css

    https://www.polymer-project.org/1.0/tools/optimize-for-production.html

    回复于

相关问题