捆绑 Polymer 组件的最佳实践答案

【问题标题】：Best practices to bundle Polymer components捆绑 Polymer 组件的最佳实践
【发布时间】：2014-11-11 21:03:22
【问题描述】：

Polymer dist/ 文件夹有一个 html 文件 https://github.com/Polymer/polymer/tree/master/dist，带有一个 HTML 导入和一个脚本标签。大多数聚合物元素甚至没有 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 做的事情一样，期望以编程方式加载和访问组件很方便。

我想听听聚合物团队或其他聚合物开发人员/用户关于他们为解决此问题而遵循的最佳实践。

【问题讨论】：

不确定你的意思。您只需导入 html 文件。此外，html 导入会被删除并处理一次。所以如果你在你的应用中包含roboto (<link rel="import" href="bower_components/font-roboto/roboto.html">) 作为几个自定义元素，它只会被加载一次（你可以在网络面板中检查它）
@arbitter 很高兴了解重复数据删除和一次性加载。关于为什么 Polymer 元素不只在 dist/ 文件夹中分发所需的组件代码的后续问题？
+1 @jdepypere 尚未验证，但看起来每个组件至少有一个 HTTP 请求。显然，这对于具有数十个组件的真实应用程序来说是不利的
@UAvalos 你是绝对正确的，而 Vulcanize 肯定是要走的路！

标签： polymer

【解决方案1】：

如果我对您的理解正确，您想要的是 Vulcanize。截至撰写本文时，对于聚合物 1.0，说明如下：

如果您有一个输入 HTML 文件 elements.html，它使用了许多 HTML 导入，您可以通过 Vulcanize 运行它，如下所示：

vulcanize elements.html -o elements.vulcanized.html

-o 或 --output 标志会将输出定向到名为 elements.vulcanized.html 的新文件。如果您省略 -o 标志，Vulcanize 会将输出打印到标准输出，如果您想将其通过管道传输到另一个命令，这将很有用。

elements.vulcanized.html 现在包含一个版本的 elements.html，其中所有导入内联并且依赖项扁平化。任何 URL 的路径都会根据新的输出位置自动调整，JavaScript 中设置的路径除外。

您可以将其他选项以标志的形式传递给 Vulcanize。有关受支持标志的完整列表，请参阅官方 Vulcanize 文档。

这是上面的相同示例。额外的标志告诉 Vulcanize 去除 cmets，并将外部脚本和 CSS 文件合并到硫化文件中。

vulcanize -o elements.vulcanized.html elements.html --strip-cmets --inline-scripts --inline-css

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

【讨论】：