lang/front

Web Component 를 만드는 모든 방법 - 2021-11-18

C/H 2021. 11. 18. 16:38 
const template = document.createElement('template');
template.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 id="dec">-</button>
  <span id="count"></span>
  <button id="inc">+</button>`;

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.shadowRoot.getElementById('inc').onclick = () => this.inc();
    this.shadowRoot.getElementById('dec').onclick = () => this.dec();
    this.update(this.count);
  }

  inc() {
    this.update(++this.count);
  }

  dec() {
    this.update(--this.count);
  }

  update(count) {
    this.shadowRoot.getElementById('count').innerHTML = count;
  }
}

customElements.define('my-counter', MyCounter);

1 구성 요소의 번들 크기

  • <my-counter/>단일 구성 요소 만 제공하는 경우 단일 구성 요소에 대한 전체 라이브러리 비용이 있습니다.
  • 라이브러리가 포함된 단일 구성 요소의 총 비용입니다.

Bundle size of 1 component - Minified Only

노트

  • HTMLElement구성 요소는 종속성이 없으며 비교할 수 없는 작은 패키지를 만듭니다.
  • Prism(이 시점에서 실험적) 단일 구성 요소에 대한 가장 작은 패키지입니다.
    런타임이나 종속성이 전혀 없습니다(매우 인상적).
    https://prismjs.com/은 https://highlightjs.org와 함께 코드 하이라이트 라이브러리 입니다만,
    여기서 말하는 웹 컴포넌트 라이브러리는 https://github.com/kaleidawave/prism인것 같습니다.
  • GitHub's Catalyst는 인상적인 작은 패키지이지만 템플릿 렌더링 기능이 없습니다.
    jtml(GitHub), lit-html또는, uhtml 등을 추가해야합니다.
  • Svelte 뛰어난 트리 쉐이킹으로 인해 매우 작은 라이브러리 런타임 비용으로 매우 잘 수행됩니다.
  • React(ko), Vue2및 ElemX라이브러리는 20킬로바이트 이상으로 표시됩니다.
  • ElemX와 함께 제공되는 MobX강력하지만 가볍지는 않습니다.
  • Vue3 버전은 Vue2에 비해 30% 개선된 속도로 전달(delivering on promises) 됩니다.
  • 새로운 Lit은 이전 LitElement버전 보다 거의 20% 더 작습니다.
    code-workshop-kit generator, https://github.com/code-workshop-kit/create 참고.
  • LitTypeScript 의 새로운 기능은 데코레이터를 사용하기 때문에 JavaScript보다 큽니다.
    (트랜스파일 후 상용구 코드를 꽤 추가합니다).

주의

  • 일부 라이브러리는 상당한 가치를 제공하며 다른 라이브러리보다 더 많은 기능을 제공합니다.
    이러한 경우 더 큰 크기가 표시되는 것이 정상입니다.
  • 그럼에도 불구하고 간단한 카운터 구성 요소의 경우 더 많은 트리 흔들림이 발생하는 것을 보고 싶습니다.

성능

JavaScript 파싱 성능 + DOM 트리 생성

  • Google Chrome 버전 95.0.4638.69(공식 빌드)(arm64) 에서 Tachometer로 벤치마킹되었습니다 .
  • 벤치마크 페이지는 <my-counter ></my-counter>라이브러리 번들 코드가 인라인된 단일 페이지에 배치된 50개로 구성 됩니다.

Performance of Parsing JavaScript + Create DOM tree

노트

  • 2ms의 오차 범위가 있음을 고려하십시오.
  • 모든 것이 로컬에서 실행되므로 네트워크 다운로드 시간은 여기에서 고려되지 않습니다.
  • 모든 것이 상대적으로 강력한 노트북에서 실행되며 결과는 전화나 태블릿과 같은 저가형 장치에서 완전히 다를 수 있습니다.

최종

  • 일부 라이브러리는 트리 쉐이킹의 이점을 더 잘 활용하기 위해 기능을 분할하는 것이 좋습니다.
  • Stencil과 Svelte를 제외하고 어떤 라이브러리도 즉각적인 CSS 축소를 제공하지 않습니다.

그 외 변경사항이 원문 페이지에 있습니다. 확인 해 보세요.

반응형