聚合物CLI页面上的多个元素和重复呼叫

所以我是聚合物新手，决定看看聚合物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关联的文件的重复请求。

我的问题是，有没有更干净的方法来做到这一点？ 或者这是聚合物如何处理同一页面上的多个元素？

---

当您定义您的元素并开始构建应用程序时，聚合物cli将分析您的来源并在您构建捆绑包时对您的进口进行重复数据删除。 然后，您将最终获得包含所有依赖关系的单个文件。

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

我有这样的结构：

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

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

链接地址: http://www.djcxy.com/p/5335.html

上一篇: Polymer CLI multiple elements on a page and duplicate calls

下一篇: Are Material Components Web and Polymer 2.0 mutually exclusive?