"𝙎𝙢𝙖𝙡𝙡𝙚𝙨𝙩𝙚𝙙𝙞𝙣𝙜Webコンポーネントを29 %小さくする

14518 ワード
webdev showdev webcomponents javascript テキストリンク
The WebComponents.Dev に関するブログ51 ways/languages to make a <my-counter> Web Component
ネイティブコードはFile Size Ranking

でも.Svelteコンパイラがコードを最適化するので、Svelteとの比較には全く反対です
だから私は“コンパイラを再生する”
そのネイティブのHtmlElementコードは、/
(と他のすべてのソースバージョンも同様です)
ジッパー
オリジナルコンポーネント
シュン476 b
スベルト
1884年
リファクタリング
15.355 B -貯金:25 %
最適化
15.339 B -貯金:29 %
** Webコンポーネントのdevサイトは、ファイルが505バイトであると言います.
githubにコピーします.IOは476バイトです.

オリジナル< my counter > = 476バイト


リファクタコード


参照JavaScript 上記のjsfiddleのタブ.
  • テンプレートリテラルは素晴らしいですが、意味のない空白としてバイトを吸い上げます\n 改行はまだミニ化されたファイルに含まれています.
  • 必要はありませんcreateElement('template') 私たちが一度だけinnerhtmlを望むとき
  • ConnectedCallbackに複数のテンプレート/コンテンツを追加する必要はありません(複数回実行可能です).
  • super() このスコープを設定して返します
  • attachShadow() 集合と戻り値this.shadowRoot

  • それで、すべてが連鎖できます.
        constructor() {
        super()
            .attachShadow({ mode: 'open' })
            .innerHTML = "<style>*{font-size:200%}...

  • MyCounterクラス定義の必要はありません
        customElements.define('my-counter', class extends HTMLElement {}

  • 51例のほとんどすべてがインラインイベントハンドラ(表記)を使用します.
        render() {
        return html`
        <button @click="${this.dec}">-</button>
        <span>${this.count}</span>
        <button @click="${this.inc}">+</button>
        `;
    }

  • そうすれば我々もそうすることができる
  • 我々は、見つけるために余分なコードを追加する必要がありますinc() and dec() 要素のメソッド(フードの下で使用するライブラリ)
  • the id ボタンの参照はもう不要です
    •     <button onclick="this.getRootNode().host.inc()">
    <button onclick="this.getRootNode().host.dec()">
  • コンポーネントはShadowRootを使用してスタイルとコンテンツをカプセル化します.The id on <span id="count"> のみをターゲットにすることができます<span> それは影に存在する

  • すべてのリファクタリングconnectedCallback は、
        connectedCallback() {
        this.update(this.count);
    }
    デフォルト値0をHTMLに設定し、ConnectedCallbackはもはや不要です
        "<span>0</span>"+
  • 不要な空白を削除するからの

  • ブラウザーがそれらを加えるので、HTML属性から必要な引用を削除してください
        <button onclick=this.getRootNode().host.inc()>
    <button onclick=this.getRootNode().host.dec()>

    • リファクタリングされたコード= 355バイト


    customElements.define("my-counter", class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({ mode: "open" })
        .innerHTML =
        "<style>" +
        "*{font-size:200%}"+
        "span{width:4rem;display:inline-block;text-align:center}" +
        "button{width:4rem;height:4rem;border:none;border-radius:10px;background-color:seagreen;color:white}" +
        "</style>" +
        "<button onclick=this.getRootNode().host.dec()>-</button>" +
        "<span>0</span>" +
        "<button onclick=this.getRootNode().host.inc()>+</button>";
      this.count = 0;
    }
    inc() {
      this.update(++this.count);
    }
    dec() {
      this.update(--this.count);
    }
    update(count) {
      this.shadowRoot.querySelector("span").innerHTML = count;
    }
  }
);

    最適化されたコード= 339バイト


    このコンポーネントは、より良く、より小さくすることができる
  • The inc , dec and update メソッドはcount ゲッターセッター
  • ドライ(自分を繰り返さないでください)は、コードメンテナンスの観点から大きいです.しかし、配達とパフォーマンスPOVから、あなたは乾いていたくありません;繰り返しの愛* {font-size:200%} は2要素のみに適用される(ボタンとスパン)
    設定font-size:200% 両方の要素でより大きなファイルを作成するが、より小さいgzipファイルを作成する.
    ( CSSパーサーには以下の作業があります).
  • .count-- > 余分なスペースを必要とするonclick あるいは、ミニファクスは- エスケープコード、4バイトを追加します.
  • <span> に置き換えられる<p>
  • なしthis.count = 0; 必要<p>0</p> 州ですか
  • 置換seagreen and white 短く#xxx 記法はこの場合、余分なバイトを保存しません.なぜなら、Countがまだコードに存在しないので、余分なgzip符号化ビットが必要です.
    • customElements.define(
  "my-counter",
  class extends HTMLElement {
    constructor() {
      super().attachShadow({
        mode: "open",
      }).innerHTML =
        "<style>" +
        "p{font-size:200%;width:4rem;display:inline-block;text-align:center}" +
        "button{font-size:200%;width:4rem;height:4rem;border:none;border-radius:10px;background:seagreen;color:white}" +
        "</style>" +
        "<button onclick=this.getRootNode().host.count-- >-</button>" +
        "<p>0</p>" +
        "<button onclick=this.getRootNode().host.count++>+</button>";
    }
    set count(p) {
      this.shadowRoot.querySelector("p").innerHTML = p;
    }
    get count() {
      return ~~this.shadowRoot.querySelector("p").innerHTML;
    }
  }
);
    注意:インラインスタイルを使用して
    しかし、コードの保守性が低下する
    .innerHTML = 
"<button style=font-size:200%;width:4rem;height:4rem;border:none;border-radius:10px;background:seagreen;color:white onclick=this.getRootNode().host.count-- >-</button>" +
"<p style=font-size:200%;width:4rem;display:inline-block;text-align:center>0</p>" +
"<button style=font-size:200%;width:4rem;height:4rem;border:none;border-radius:10px;background:seagreen;color:white onclick=this.getRootNode().host.count++>+</button>"

    EDの結論


    Webコンポーネントのリファクタリングにより小さく、より良いものになります.
    ジッパー
    original by WebComponents.DEV
    シュン476 b
    スベルト
    1884年
    リファクタリング
    15.355 B -貯金:25 %
    最適化
    15.339 B -貯金:29 %
    unity 3 dとflashのインタラクション、aes暗号解読
    モダンJavaScript Deep Dive-4章