カスタム要素のポリフィルをロードする最適な方法は何ですか？

Question

私は現在カスタム要素で遊んでいます。私は、サポートが不足しているブラウザ（多分Firefoxのみですか？）にpolyfillブラウザをインストールするには正しい方法（正しい方法のような感じ）を見つけるのに苦労しています。

私は現在、次のやっている：

if ('customElements' in window) { 
    var e = document.createElement('script'); 
    e.src = '/static/elements/my-element.js'; 
    document.body.appendChild(e); 
} else { 
    var e = document.createElement('script'); 
    // customElements 
    e.src = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.8/webcomponents-sd-ce.js'; 
    e.onload = function() { 
     var c = document.createElement('script'); 
     // ShadyCSS 
     c.src = '/static/js/custom-style-interface.min.js'; 
     c.onload = function() { 
      var i = document.createElement('script'); 
      i.src = '/static/elements/my-element.js'; 
      document.body.appendChild(i); 
     } 
     document.body.appendChild(c); 
    } 
    document.body.appendChild(e); 
} 

これは動作しますが、（特に高/低速の待ち時間のネットワーク上で）明らかに、非常に非効率的であり、また非常に騒々しい見えます。 Firefoxをサポートしようとする前に、私は単に次のようにしました：

<script src="/static/elements/my-element.js"></script> 

私は上記の嫌悪を持っています。より良い方法が必要ですが、私はそれを見つけることができません。

の前にcustomElementとShadyCSSポリフィルが実行されていることを確認しても、それほどダウンロードが遅れることはありませんか？どのポインタも高く評価されています！

編集： 今のところ私はここで追加する別のアプローチを使用しています。私はそれが完璧だとは思わないが、私の最初のアプローチよりも優れているように思えるし、誰もがポリフィルをダウンロードしてもらう必要があるかどうかは関係ありません。

function insertScript(url, downloadAsync) { 
    const script = document.createElement('script'); 
    document.head.appendChild(script); 
    script.async = downloadAsync; 
    script.src = url; 
    return script; 
} 

function downloadAsync(url) { 
    return new Promise((resolve, reject) => { 
     const script = insertScript(url, 'true'); 
     script.onload = resolve; 
     script.onerror = reject; 
    }); 
} 

var deps = []; 
if (!('customElements' in window)) { 
    deps.push(downloadAsync('/url/of/polyfill.js')); 
    // if you need more than 1 polyfill add more deps.push 
} 

Promise.all(deps).then(() => { 
    insertScript('/static/elements/my-element.js'); 
}); 

Answer 1

推奨方法は常にload the complete polyfill（82 koのみ）です。

<script src="/path/to/webcomponents-lite.js"></script> 
<script src="/static/elements/my-element.js"></script> 

スクリプトの読み込みは同期的なので、ポリフィルとカスタム要素は正しい順序でロードされます。

あなただけのFirefoxとエッジをサポートしたい場合は、（64 KO）webcomponents-lite.jsによってwebcomponents-SD-ce.jsを置き換えることはできますが、ほとんどの場合、わずか数ミリ秒を得ることができます。あなたのための特徴検出およびロードを実行します

---

代わりに、非常に悪いのネット​​ワークのための、あなたのことができuse the webcomponents-loader.js（4 KO）。

あなたはそれを小さくしたり、より良いものにしたり、その内容をメインページに直接挿入して、1回のリクエスト往復遅延を保存することができます。