Question

Polymer dist /文件夹有一个带有HTML导入和脚本标记的html文件https://github.com/Polymer/polymer/tree/master/dist。大多数聚合物元素甚至没有dist文件夹。提供像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的应用程序下载/webcomponents/font-roboto/roboto.js 只有一次http请求。

<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做同样的事情，期望以编程方式加载和访问组件很方便。

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

Answer 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版本，其中所有导入的内联和依赖项都被展平。任何URL的路径都会针对新的输出位置自动调整，但JavaScript中设置的除外。

您可以以标志的形式将其他选项传递给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

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

1 个答案: