首页 文章

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

提问于
浏览 次
0

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

我的问题是，有更清洁的方法吗？或者这是聚合物如何处理同一页面上的多个元素？

javascript html polymer polymer-2.x

1 回答

  • 1

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

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

    我有这样的结构：

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

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

    回复于

相关问题