클라이언트에서 자바스크립트 파일 크기를 줄이는 방법은 무엇입니까?-JS 튜토리얼-php.cn

클라이언트에서 자바스크립트 파일 크기를 줄이는 방법은 무엇입니까?

WBOY

풀어 주다： 2024-08-09 18:44:00

원래의

418명이 탐색했습니다.

안녕하세요 여러분! 이 기사에서는 hmpl과 같은 템플릿 언어 덕분에 자바스크립트 파일의 크기를 여러 번 줄일 수 있는 방법을 설명하고 싶습니다.

기사에 등장하는 기술적 접근 방식은 새로운 것은 아니지만, 그럼에도 불구하고 오늘날에는 이야기할 가치가 있을 만큼 대중적입니다.

자바스크립트 파일의 크기를 줄이면 클라이언트에서 페이지를 더 빠르게 로드할 수 있습니다. 최신 SPA를 사용하면 모든 축소를 고려하더라도 파일 크기가 여전히 상당히 큰 것으로 나타났습니다. 물론 페이지를 한 번 로드하면 탐색하기가 더 쉽지만, 인터넷 연결 상태가 좋지 않으면 첫 번째 로드 시간 자체가 1초에서 몇 분까지 걸릴 수 있습니다. 그렇게 오래 기다리고 싶어하는 고객은 거의 없습니다.

UI 제작을 위해 대부분의 프레임워크와 라이브러리를 사용할 때는 상용구 코드를 많이 작성해야 합니다. 각 기호는 메모리 공간을 차지합니다. Vue.js 클리커를 살펴보겠습니다.

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `<div>
        <button @click="count++">Click!</button>
        <div>Clicks: {{ count }}</div>
    </div>`,
}).mount("#app");

로그인 후 복사

아주 간단한 클릭커이지만 애플리케이션이 다소 큰 경우는 말할 것도 없고 js에서 상당한 양의 코드 라인이 필요합니다.

How to reduce javascript file size on client?

쉼표 두 개가 없어도 몇 바이트는 줄어들 수 있습니다

이것은 Vue뿐만 아니라 유사한 방식으로 작동하는 다른 프레임워크 및 라이브러리에서도 문제가 됩니다. 그러나 그것이 유일한 요점은 아닙니다. 여기에는 엄청난 수의 추가 모듈이 있으며 동일한 수의 추가 모듈이 "무한대"로 이동합니다.

사실 이 문제에 대한 해결책 중 하나가 오래 전에 제안되었으며 매우 간단합니다. 서버에서 UI를 준비하고 클라이언트에 간단히 로드하는 것입니다. 덕분에 애플리케이션 파일의 크기를 크게 줄일 수 있습니다. 이것이 바로 HMPL에서 사용되는 아이디어입니다.

예제에서도 클리커를 만들어 보겠습니다. 단, hmpl.js를 사용하겠습니다.

document.querySelector("#app").appendChild(
  hmpl.compile(
    `<div>
        <button>Click!</button>
        <div>Clicks: {{ src: "/api/clicks", after: "click:button" }}</div>
    </div>`
  )().response
);

로그인 후 복사

보시다시피 UI는 동일하지만 파일 크기가 조금 작아집니다.

How to reduce javascript file size on client?