👨‍👩‍👦‍👦 🔡 🧘 ポリマー、性能のための戦い 🉑 ◼️ 🍠

Webコンポーネントが私たちの未来であることを誰もが知っているわけではありませんが、それは誰にも秘密ではありません。この未来はまだ来ていませんが、すでに始まっています。この未来を近づける方法の1つは、あまり知られていないGoogle企業のPolymerライブラリです。未来が来ない理由の1つは、ブラウザーの互換性と、この互換性の欠如によって引き起こされるパフォーマンスの低下です。些細なこともあれば、重大なこともあります。

Polymerライブラリは、偏見を持って言うと良いと思います。コードは美しく、きれいですが、まだ人気のあるFirefoxブラウザーのパフォーマンスが低下しても、近い将来人気が出ることはありません。他にもっと機能するものがあれば誰がそれを気にする必要があるのか、そしてインターネット上であなたのこれらの中を検索しても解決策は得られません。

しかし、あなたはまだ何かできますか？確かに。できる！

ここまで読んで興味を失っていない場合は、Polymerが現在の2番目のバージョンで何であるか、依存関係と親友をどのように正確に宣言しているかをご存じでしょう。これに使用される<link rel = "import">タグは問題の根本原因であり、Firefoxではサポートされておらず、サポートされません。

ページがロードされた後、コンテンツがリンクによってプルされ、コンテンツが解析されて実行されます。その後、コンポーネントが使用可能になり、表示され始めます。その結果、0.5秒からの接続速度に応じて、アプリケーションは完全にまたは部分的にアクセスできなくなります。これは単にいです。

これをどうするか、あなたは尋ねますか？たぶんいくつかのアセンブリツールがありますか？たぶん、あまり知られていない会社のチームはすでに試したことがあるのでしょうか？

アセンブリツールがありますが、結果として、いくつかではなく、<link rel = "import">があります。ここには、さまざまなhtmlタグとscriptタグがあります。

1つのjsでのビルドはどうですか？しかし、まさか！それともどういうわけですか？

開発チームからの次のニュースは、第3バージョンの準備に関するものでした

インポートは、<link rel = "import">ではなく、ES6インポート構文を使用します。

テンプレートは、<dom-module>および<template>要素ではなく、文字列を返すテンプレートゲッターを提供することによって定義されます。

要するに、純粋なJS。それがどのように作られているか見てみましょう。結局のところ、私たちはいつでもコンポーネントを書き換えることができ、たとえばベンダーの鉄と紙をどう処理するかなどです。

まず、友達が彼らに何をしたか見てみましょう。

鉄のアイコン

鉄の形

コンポーネントを純粋なjavascriptに自動的に変換するだけです。

テンプレートをタグからオブジェクトのプロパティに移動し、自動追加機能でコンポーネントをラップしました。

誰でもできるので、自分で試してみましょう。

最初に、コンポーネントを含むファイルを1つの通常のポリマービルドに収集し、結果に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($('<script>' + script + '</script>')); $this.remove(); return; } } $this.after($('<script>Polymer.addToHead(`' + $.html(this) + '`);</script>')); $this.remove(); }); }, parserOptions: {decodeEntities: false} }))

コードはどこですか

 Polymer.addToHead = (code) => { let a = document.createElement('div'); a.style.display = 'none;'; a.innerHTML = code; document.head.appendChild(a); };

  .pipe(splitJsCss({ type: ['js'] })) .pipe(gzip())

そして、出力で既にjsを圧縮しています。これは、プロジェクトで一般的な方法で他のjsと同様に接続できます。

突然、Firefoxの遅延が突然（tm）消えます。追加の読み込みと解析にオーバーヘッドはありません。すべてが同期的に実行されます。サイトの一般的なポリシーに従ってキャッシュされます。

これらすべてがES6の矢印機能ほどエレガントであるとは言えませんが、Polymerライブラリはこの記事を読む1時間前よりもはるかに便利になりました。

PS欠陥はありますか？必要に応じてコンポーネントをロードする前に特に注意が必要だった場合は、当然ながら、ダブル実行を個別に監視する必要があります。

PPSなぜ戦いなのか。自分のコレクターを書く前に、開発者にテンプレートをjavascriptに転送するように提供しようとしたが、共通の言語を見つけることができなかったから。美しいコードを書くことができるライブラリと、今日広く普及する可能性を自分たちの手で絞った開発者。

ポリマー、性能のための戦い

More articles: