Polymer CLI multiple elements on a page and duplicate calls

So I'm new to polymer and decided to take a look at polymer 2.0. I found the Polymer CLI and decided to create a couple of custom elements. I've managed to get them rendering on a page but I'm hoping to try to better understand the best practices for having multiple elements on the same page.

Right now my current project structure looks like this.

  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

I have a index.html template file that is importing the two elements to display.

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>

Now I am able to see them rendering on front but I had a couple question about best practices for multiple elements on the same page and maybe not having calls to duplicate. Currently in both element html files by default each element has it own bower_components and they both import <link rel="import" href="bower_components/polymer/polymer-element.html"> in their .html file. So when I render both elements on the page you can see duplicated requests with all files associated with the polymer-element.html .

My question is, is there a cleaner way to do this? or is this how polymer handles multiple elements on the same page?

---

When you define your elements, and start building the application, polymer-cli will analyze your sources and deduplicate your imports when you build a bundle. You will then end up with single file that contains all dependencies in one place.

Also worth mentioning you should have a single bower_components directory, subsequent imports to same resource should not fire requests again.

I have a structure like this:

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

where elem1 will import <link rel="import" href="../../bower_components/polymer/polymer.html"> like that.

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

上一篇: 聚合物2与外部登录

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