Polymer 进口聚合物的最佳做法

我在初学者工具包中看到过这种情况，我想知道导入元素bower元素的最佳实践是什么

每个元素是否应该重复导入相同的bower包？或者应该只有一个html表单导入所有bower元素吗

另外，为什么

总是在每个元素中导入而不考虑

示例-每个元素导入自己的元素，有时会重复导入（其他元素也可能导入这些元素）：

---

或一张导入所有元素的html表格：

<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-poly.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">
<link rel="import" href="../bower_components/google-map/google-map-directions.html">


<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">

---

TL；博士

我不认为已经出现了可靠的最佳实践

更长的阅读时间

我个人的意见是，导入链接通常不是一个好主意，因为你会遇到麻烦时捆绑。除非您想捆绑整个应用程序，否则在这种情况下，导入的位置无关紧要

---

您可能希望捆绑相关元素。例如，

我相信随着2016年谷歌I/）上宣布的PPL模式的建立，以及聚合物构建机制，一个由聚合物CLI驱动的基本结构出现了

我所做的取决于我是试图构建一个可重用的元素，还是仅仅构建一个可重用的组件。在一个可重复使用的组件中，我总是导入
聚合物
，只导入我在组件中使用的那些组件。我通过
。/import-element/import-element.html

对于我自己的应用程序，我有一个规则，它试图通过
this.importHref
延迟加载所有内容，但当该元素最初加载时将显示的内容除外。我已经为包含
iron pages
的元素构建了一个行为，因此支持它。在本例中，我导入了最初显示的所有元素。其余的我不进口

html导入是由Polymer进行重复数据消除的，因此，如果您尝试多次加载内容，它们将只加载一次

在本例中，我使用绝对url
/bower\u components/import-element/import-element.html引用bower组件元素，对于我的应用程序中使用相对url的组件元素，则使用相对url引用它们。我目前将我的应用程序的所有自定义元素存储在同一个目录中，因此为了引用它们，我只使用
import element.html
。我认为最后一段不是公认的做法，但我发现不需要将两个物理目录有效地映射到同一个url更容易
 再加上。。。在Polymer Start Kit（现在是Polymer CLI的一部分）中，您编写的每个元素都导入它自己的依赖项，而不是一个
elements.html
文件。这意味着在生成构建时，每个元素都与它自己的依赖项绑定在一起。如果一个依赖项已经导入到另一个元素中，它将不会被绑定，因为它已经存在。然后，您甚至可以考虑异步导入元素以提高性能。HTML导入将由浏览器/polyfill消除重复。这是规格的一部分。但一旦硫化，它们就不再是进口产品了，对吗？因此，有可能以multiple polymer.html等结尾。@TomaszPluskiewicz我使用的是http/2，所以我不硫化任何东西-因此没有这方面的经验。当然http/2会让我们的生活更轻松：）
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-poly.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">
<link rel="import" href="../bower_components/google-map/google-map-directions.html">


<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">