聚合物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

當您定義您的元素並開始構建應用程序時，聚合物cli將分析您的來源並在構建包時重複刪除您的導入。然後，您將最終獲得包含所有依賴關係的單個文件。

另外值得一提的是你應該有一個單一的bower_components目錄，後續導入到同一資源不應該再次觸發請求。

我有這樣的結構：

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

其中elem1將導入<link rel="import" href="../../bower_components/polymer/polymer.html">這樣。