Polymer, драка за производительность
Ни для кого не секрет, хотя не каждый в курсе, что вебкомпоненты — наше будущее. Это будущее ещё не наступило, но уже вот-вот. Один из способов приблизить это будущее — библиотека Polymer от одной малоизвестной корпорации Google. Одна из причин, по которой будущее не наступает — это совместимость с браузерами и вызванное отсутствием этой совместимости падение производительности. Иногда оно незначительное, а иногда критическое.
Библиотека Polymer, скажу с предубеждением, хорошая, код получается красивый и чистый, а вот падение производительности во всё ещё популярном браузере Firefox — то что не сделает её популярной в ближней перспективе по моему мнению. Ибо кому оно надо возится, если есть другие, более работающие вещи, а поиски в этих ваших в интернетах решения не дают.
Однако может всё же можно что сделать? Так точно. Можно!
Если вы дочитали до этого места и не утратили интереса, то скорее всего вы в курсе, что такое Polymer в текущей своей второй версии и как именно он объявляет зависимости и полифилы. Тег , который для этого используется, и есть корень проблемы, он не поддерживается и никогда не будет поддерживается в Firefox.
После загрузки страницы подтягивается содержимое по ссылкам , происходит разбор и исполнение содержимого, только после этого компоненты становятся доступны и начинают отображаться, в результате мы имеем в зависимости от скорости соединения от полусекунды полностью или частично недоступное приложение, что просто некрасиво.
Что с этим делать, спросите вы? Может есть сборочные инструменты какие? Может команда малоизвестной корпорации уже постаралась?
Сборочный инструмент есть, но в результате у нас не несколько, а один , в котором ассорти html и тегов script.
Постойте, а как же билд в один js? А никак! Или всё же как-то?
Очередная новость от команды разработчиков была про подготовку третьей версии
Imports use ES6 import syntax, not .
Templates are defined by providing a template getter that returns a string—not theand elements.
Чистый JS, короче. А теперь посмотрим, как он сделан. Ведь свои компоненты мы всегда можем переписать, а что делать с вендорными iron и paper, например.
Для начала посмотрим, что с ними сделали наши друзья.
iron-icon
iron-form
Они просто автоматически сконвертировали компоненты автоматически в чисто яваскриптовые.
Перенесли шаблоны из тега в свойство объекта и обернули компоненты в функцию автоматического добавления.
Ну так любой сможет, поэтому давайте попробуем сами.
Для начала соберём файлы с компонентами в один штатным polymer build, а затем натравим на результат gulp и попробуем получить js.
let cheerio = require('gulp-cheerio');
...
.pipe(cheerio(
{
run: function ($) {
$('body > div > *').each(function () {
if (this.tagName === 'script') {
return;
}
let $this = $(this);
if (this.tagName === 'dom-module') {
let script = $this.children('script').html();
let template = $this.children('template').html();
if (template && script) {
script = script.replace('Polymer({', "Polymer({_template:`" + template + '`,');
script = script.replace('static get is()', 'static get template(){return `' + template + '`}static get is()');
$this.after($(''));
$this.remove();
return;
}
}
$this.after($(''));
$this.remove();
});
}, parserOptions: {decodeEntities: false}
}))где код
Polymer.addToHead = (code) => {
let a = document.createElement('div');
a.style.display = 'none;';
a.innerHTML = code;
document.head.appendChild(a);
};
Должен быть подключен сразу после , ну или как вы там сами себе придумаете.
В результате мы получаем html состоящий исключительно из тегов
