구조 함수() 동적 가져오기()

현대 자바스크립트via ES Module imports는 우리에게 두 가지 모듈화된 자바스크립트를 처리하는 방법을 제공했다.import가지 스타일이 있고 where-ever도 있어요.문법의 차이는 매우 작지만, 응용 프로그램의 불러오는 데 직접적인 영향을 미치는 것을 아십니까?어디 보자.

// knights-who.js
import "./the-parrot-sketch.js";
// really important class that says..
class KnightsWho extends HTMLElement {
  constructor() {
    super();
    if (this.getAttribute("say") != null) {
      let sketchTag = document.createElement("the-parrot-sketch");
      sketchTag.innerHTML = this.getAttribute("say");
      this.appendChild(sketchTag);
    }
  }
}
customElements.define("knights-who", KnightsWho);

그런 다음 문서import()는 다음과 같이 매우 중요한 모듈식 JavaScript를 참조할 수 있습니다.

<script type="module" src="knights-who.js"></script>
<knights-who say="Nee"></knights-who>

이 문법에서 브라우저는 다음과 같은 데이터로 연결된 시간에 응답합니다.

획득main.html, 해석 시작

스크립트 type="module"시작 요청 참조main.html

파일을 읽고 다른 가져오기 인용을 얻기knights-who.js 찾기 및 요청

추가 모듈 참조가 없을 때까지 파일을 쉬지 않고 읽습니다.

모듈화된 코드 체인을 완성하고 모든 코드를 한 번에 실행

the-parrot-sketch.js 라벨에 Nee라고 쓰여 있고 knights-who 라벨로 싸요.너무 무서워요.

모듈식 자바스크립트는 이렇게 작동합니다. 추가 모듈식 <the-parrot-sketch> 인용을 검색한 다음 모든 인용을 불러온 후에 모든 인용을 실행합니다.개발자에게 모듈화 코드를 발표하는 것은 좋은 일이지만, 다른 인용에 약 100개의 인용을 끼워 넣으면?

'이상한 수작' 동적 가져오기 ()

우리import에서 동태import()를 활용하면 시각적으로 비슷해 보이지만 실행 시간은 매우 다르다.어디 보자.

// knights-who.js
// really important class that says..
class KnightsWho extends HTMLElement {
  constructor() {
    super();
    if (this.getAttribute("say") != null) {
      let sketchTag = document.createElement("the-parrot-sketch");
      sketchTag.innerHTML = this.getAttribute("say");
      this.appendChild(sketchTag);
      setTimeout((e) => {
        import("./the-parrot-sketch.js");
      }, 0);
    }
  }
}
customElements.define("knights-who", KnightsWho);

이 설정에서 우리는 구조 함수 ()에서 constructor() 를 사용합니다.이렇게 함으로써 우리는 다음과 같은 회전 시간을 얻었다.

획득import(), 해석 시작

스크립트 type="module"시작 요청 참조main.html

파일을 읽어서 다른 가져오기 인용을 가져오지만 인용을 찾지 못했습니다.

모듈화된 코드 체인을 완성하고 모든 코드를 한 번에 실행

knights-who.js 라벨은 Nee를 표시하고 knights-who 라벨에 포장합니다(정의되지 않음).
따라서 백엔드에서 그림을 그리기 시작해서, 추가 모듈 인용이 없을 때까지, 탭은 자신의 시간표에 따라 가져옵니다.

여기서 관건적인 차이점은 우리의 체인을 여러 개의 실행 체인으로 분해하는 것이 아니라 잠재적으로 그리기 시작했다는 것이다.하나의 요소에서 매우 작지만 완전한 응용 프로그램을 구축하고 그 중에서 이런 방식으로 정보의 한 걸음 한 걸음 처리하는 것을 상상해 보세요.
다음은 haxtheweb.org 에 불러오는 HAXcms에서 비례적으로 발생하는 상황을 보여 주는 gif입니다.프레젠테이션을 위해 로드는 3G로 제한되지만 UI의 모든 부분은 웹 구성 요소이고 모든 부분은 일련의 체인 끊기<the-parrot-sketch>를 통해 로드되어 납품을 최적화합니다.

고려 요소

이것은 시간 안배를 깨뜨렸기 때문에 만약 비수합원소가 간격을 고려해야 한다면, 너는 FOUC를 얻을 수 있다.위 ./the-parrot-sketch.js에서 흰색 화면이 잘렸는데, FOUC를 피하기 위해 마운트 지시기의 시간을 수정해야 하기 때문이다😳. 그러나 UI가 준비될 때까지 로드 표시줄이 하나밖에 없기 때문에 비스타일의 컨텐츠는 실제로 새로 고쳐지지 않습니다.그리고 css 선택기 기술import()을 사용하면 하나의 UI 요소가 합리적인 크기 설정 기본값을 가지고 정의되지 않은 웹 구성 요소를 선택하는 데 도움이 됩니다..gif 방법은 첫 번째 그리기 시간(TTFP)을 가속화하는 것이기 때문에 가져오기 내부에 크기 스타일이나 css 또는 상태 변수를 사용하여 FOUC를 줄일 수 있다.잠시 후 Dynamic import:not(:defined) {}에 들어가지만 다음 시도가 있습니다.

  connectedCallback() {
    this.setAttribute("hidden", "hidden");
    import("./what-ever.js").then((m) => { this.removeAttribute("hidden")});
  }

너무 간단하지만 전체 응용 프로그램/기타 요소를 백엔드에서 계속 불러올 수 있고 사용자는 일부 체험을 할 수 있다.import()는 DOM에 연결하기 때문에 속성 설정을 시작할 수 있음을 나타냅니다.이 코드는 [드로잉] 요소를 숨긴 다음 Promise 내부에 로드하면 전체 요소가 표시됩니다.