폴리머 용 베스트 프랙티스

Question

저는 스타터 키트에서 앞뒤로 움직이는 것을 보았습니다. 그리고 나는 요소 요소를 가져 오는 가장 좋은 방법이 무엇인지 궁금합니다.

각 요소는 같은 bower 패키지를 반입해야합니까? 또는 모든 bower 요소를 가져 오는 html 시트가 하나만 있어야합니까?

<link rel="import" href="../bower_components/polymer/polymer.html">도 항상 각 요소에 가져온 이유는 무엇입니까?

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/paper-card/paper-card.html"> 
<link rel="import" href="../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../bower_components/iron-image/iron-image.html"> 
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> 

<dom-module id="my-view1"> 

---

또는 하나의 HTML 시트 가져 오기 모든 요소 :

<!-- Iron elements --> 
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html"> 
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html"> 
<link rel="import" href="../bower_components/iron-icons/iron-icons.html"> 
<link rel="import" href="../bower_components/iron-icons/maps-icons.html"> 
<link rel="import" href="../bower_components/iron-pages/iron-pages.html"> 
<link rel="import" href="../bower_components/iron-selector/iron-selector.html"> 
<link rel="import" href="../bower_components/iron-form/iron-form.html"> 
<link rel="import" href="../bower_components/google-map/google-map.html"> 
<link rel="import" href="../bower_components/google-map/google-map-poly.html"> 
<link rel="import" href="../bower_components/google-map/google-map-marker.html"> 
<link rel="import" href="../bower_components/google-map/google-map-directions.html"> 


<!-- Paper elements --> 
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html"> 
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../bower_components/paper-item/paper-item.html"> 
<link rel="import" href="../bower_components/paper-material/paper-material.html"> 
<link rel="import" href="../bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html"> 
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"> 
<link rel="import" href="../bower_components/paper-styles/typography.html"> 
<link rel="import" href="../bower_components/paper-toast/paper-toast.html"> 
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"> 
<link rel="import" href="../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../bower_components/paper-input/paper-input.html"> 
<link rel="import" href="../bower_components/paper-input/paper-textarea.html"> 
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html"> 

Answer 1

에게 예 - 각 요소의 수입이 자신의 요소, 때로는 redudently (다른 요소는 이러한를 가져올 수)를의 TL; DR;

아직 모범 사례가 나오지 않았습니다.

는 긴 번들 때 문제로 실행하기 때문에 내 개인적인 의견은, 그 수입 링크가 모두 일반적으로 좋은 생각이 아닌 것입니다

읽어 보시기 바랍니다. 전체 응용 프로그램을 번들로 묶지 않으려면 가져 오기 위치가 중요하지 않습니다.

관련 요소를 번들로 묶을 수 있습니다. 예를 들어, <app-page-admin-panel> m <app-page-user-profile> 등이있을 수 있습니다. 이들 각각은 필요할 때 처음으로 지연로드 될 수 있습니다. 번들 HTML 가져 오기는 AFAIK와 같은 유연성을 제공하지 않습니다.

모든 것을 묶어두면 아무 것도 게으른로드가 없습니다.

주문형으로로드되는 각 요소에 대해 번들을 만드는 것이 앞으로의 단계이지만 일반적인 요소는 무엇입니까? 관리자 패널과 사용자 프로필 요소 모두 <paper-button>을 가져 오는 경우 각 번들에 포함 시키시겠습니까? 이것은 아마도 낭비적인 대역폭이지만 안전 할 것입니다. 그러나 폴리머 자체는 여러 번 가져올 수 없습니다. 따라서 각 요소에서 가져 오는 것은 좋은 생각이 아닙니다.

가능한 미래 솔루션 - ES6 수입에 대한 ES6 모듈 수입은

개인적으로 나는 매우 희망. import "polymer"을 사용하면 번들로 제공되거나 안되기 때문에 모듈 로더 (및 나중에 브라우저)가 한 번만 가져올 수 있음을 보장하므로 안전합니다. 그 다른 질문에 대한 나의 대답을보고 싶을 수도 있습니다 : Modules in Polymer.

Answer 2

Google I /) 2016 및 Polymer 빌드 메커니즘에서 발표 된 PPL 패턴의 설정으로 Polymer CLI가 주도하는 기본 구조가 나타났습니다.

내가하는 일은 재사용 가능한 요소 또는 재사용 할 수있는 하나의 구성 요소를 만들려고하는지 여부에 달려 있습니다. 재사용 가능한 요소에서 나는 항상 polymer을 가져오고 요소 내에서 사용한 요소 만 가져옵니다.나는 모든 것을 참조한다. ../import-element/import-element.html

나는 내 자신의 응용 프로그램을 사용하여 그 요소가 처음로드 될 때 화면에 표시 될 것을 제외하고 모든 것을 게으른로드하려고 시도하는 규칙을 가지고있다. iron-pages을 포함하는 요소에 대한 동작을 빌드하여 지원합니다. 이 경우에는 처음에 표시 될 요소 인 polymer을 가져옵니다. 나머지를 가져 오지 않습니다.

html 가져 오기는 Polymer에 의해 중복 제거되므로 두 번 이상로드하려고 시도하면 중요하지 않습니다. 한 번만로드됩니다.

이 경우 나는 절대 URL이 /bower_components/import-element/import-element.html 인 bower 구성 요소 요소를 참조하고 내 응용 프로그램에는 상대 URL을 참조합니다. 나는 현재 동일한 디렉토리에 내 애플 리케이션에 대한 모든 사용자 정의 요소를 저장하므로, 난 단지 import-element.html을 사용하고 그들을 참조하십시오. 이 마지막 단락은 이 아니지만 수락 된 연습이라고 생각합니다.하지만 실제로는 두 개의 실제 디렉토리를 동일한 URL에 매핑하지 않아도됩니다.