Polymer CLI 页面上的多个元素和重复调用

Question

所以我是聚合物的新手，因此决定研究一下聚合物 2.0。我找到了 Polymer CLI 并决定创建几个自定义元素。我已经设法让它们在页面上呈现，但我希望尝试更好地了解在同一页面上包含多个元素的最佳做法。

现在我目前的项目结构是这样的。

  index.html - used to display the elements
  elements
  ->first-element
     -> bower_components
     -> demo -> index.html
     -> test -> first-element_test.html
     -> bower.json
     -> first-element.html
     -> index.html
     -> polymer.json
  ->second-element
     -> bower_components
     -> demo -> index.html
     -> test -> second-element_test.html
     -> bower.json
     -> second-element.html
     -> index.html
     -> polymer.json

我有一个 index.html 模板文件，它正在导入要显示的两个元素。

inside index.html file:

<link rel="import" href="elements/first-element/first-element.html"/>
<link rel="import" href="elements/second-element/second-element.html"/>

<first-element></first-element>
<second-element></second-element>

现在我可以看到它们在前面呈现，但我有几个关于同一页面上多个元素的最佳实践的问题，并且可能没有调用复制。目前在两个元素 html 文件中，默认情况下每个元素都有自己的 bower_components 并且它们都在 .html 文件中导入 <link rel="import" href="bower_components/polymer/polymer-element.html">。因此，当我在页面上呈现这两个元素时，您可以看到与polymer-element.html 关联的所有文件的重复请求。

我的问题是，有没有更清洁的方法来做到这一点？或者这就是聚合物在同一页面上处理多个元素的方式？

Answer 1

当您定义元素并开始构建应用程序时，polymer-cli 将分析您的来源并在您构建捆绑包时对您的导入进行重复数据删除。然后，您最终会得到一个包含所有依赖项的文件。

另外值得一提的是，您应该有一个 bower_components 目录，随后对同一资源的导入不应再次触发请求。

我有这样的结构：

-- bower_components
-- node_modules
-- src
    -- elem1
    ...
    -- elemN

elem1 将像这样导入<link rel="import" href="../../bower_components/polymer/polymer.html">。