Хобрук: Ваш путь к мастерству в программировании

Лучшие практики для объединения полимерных компонентов

Папка dist / polymer имеет один файл HTML https://github.com/Polymer/polymer/tree/master/dist с импортом HTML и тегом скрипта. У большинства полимерных элементов даже нет папки dist. Разве не было бы хорошей практикой предоставить единый файл дистрибутива, например, polymer.js, и сделать то же самое для каждого доступного там полимерного элемента?

У такого подхода есть несколько очевидных преимуществ:

1. Minimum http requests to get the polymer core or a polymer element. 
2. Easy to use for the clients, just include the required element.

Пример: элементы, которые зависят от других общих элементов,

- shared-element: /webcomponents/font-roboto/roboto.js
- custom-element1: uses shared-element
- custom-element2: uses shared-element

Приложение, использующее custom-element1 и custom-element2, загружает /webcomponents/font-roboto/roboto.js только один раз с одним HTTP-запросом.

<script src="../webcomponents/webcomponentsjs/webcomponents.js"></script>
<script src="../webcomponents/custom-element1/custom-element1.js"></script>
<script src="../webcomponents/custom-element2/custom-element2.js"></script>

PS: приведенный выше custom-element1.js делает то же самое, что и custom-element1.html, ожидая, что это удобно для программной загрузки и доступа к компоненту.

Я хотел бы услышать от команды разработчиков полимеров или других разработчиков / пользователей полимеров о передовых методах, которым они следуют для решения этой проблемы.

11.11.2014

  • Не уверен, что вы имеете в виду. Вам нужно только импортировать HTML-файл. Кроме того, импорт HTML удаляется и обрабатывается один раз. Поэтому, если вы включите roboto (<link rel="import" href="bower_components/font-roboto/roboto.html">) в оба приложения как несколько пользовательских элементов, он будет загружен только один раз (вы можете проверить это на сетевой панели) 19.11.2014
  • @arbitter Приятно знать о дедупликации и одноразовой загрузке. Следующий вопрос о том, почему элементы Polymer не распространяют только необходимый код компонента в папке dist /? 25.11.2014
  • +1 @jdepypere еще не проверил, но похоже, что есть хотя бы один HTTP-запрос для каждого компонента. Очевидно, это плохо для реального приложения, состоящего из десятков компонентов. 23.03.2016
  • @UAvalos, вы абсолютно правы, и Vulcanize, безусловно, вам подходит! 24.03.2016

Ответы:


1

Если я правильно вас понимаю, вам нужно вулканизировать. На момент написания этой статьи для полимера 1.0 были следующие инструкции:

Если у вас есть входной HTML-файл elements.html, который использует несколько операций импорта HTML, вы можете запустить его через Vulcanize следующим образом:

вулканизировать elements.html -o elements.vulcanized.html

Флаг -o или --output направит вывод в новый файл с именем elements.vulcanized.html. Если вы опустите флаг -o, Vulcanize распечатает вывод в стандартный вывод, что может быть полезно, если вы хотите передать его другой команде.

elements.vulcanized.html теперь содержит версию elements.html со встроенным импортом и сведенными зависимостями. Пути к любым URL-адресам автоматически корректируются для нового места вывода, за исключением тех, которые заданы в JavaScript.

Вы можете передать дополнительные параметры Vulcanize в виде флагов. Полный список поддерживаемых флагов см. В официальной документации Vulcanize.

Вот тот же пример сверху. Дополнительные флаги говорят Vulcanize вырезать комментарии и объединить внешние скрипты и файлы CSS в вулканизированный файл.

вулканизировать -o elements.vulcanized.html elements.html --strip-comments --inline-scripts --inline-css

https://www.polymer-project.org/1.0/tools/optimize-for-production.html

23.03.2016
Новые материалы

Решения DBA Metrix
DBA Metrix Solutions предоставляет удаленного администратора базы данных (DBA), который несет ответственность за внедрение, обслуживание, настройку, восстановление базы данных, а также другие..

Начало работы с Блум
Обзор и Codelab для генерации текста с помощью Bloom Оглавление Что такое Блум? Некоторые предостережения Настройка среды Скачивание предварительно обученного токенизатора и модели..

Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...