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

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

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

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

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `

        Click!
        
Clicks: {{ count }}
    
`,
}).mount("#app");

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

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

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

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

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

document.querySelector("#app").appendChild(
  hmpl.compile(
    `

        Click!
        
Clicks: {{ src: "/api/clicks", after: "click:button" }}
    
`
  )().response
);

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

파일을 축소하고 템플릿에서 불필요한 공간을 모두 제거하더라도 파일이 동등하거나 더 클 수도 있지만 이는 작은 예에 대한 가정일 뿐입니다. 대규모 애플리케이션을 사용한다면 이 접근 방식을 사용하면 js가 훨씬 적어질 것이 분명합니다.

예에서 볼 수 있듯이 애플리케이션 상태를 계산하고 저장하는 기능은 원하는 경우 서버로 이동할 수 있습니다.

예제에서 볼 수 있듯이, 원하는 경우 애플리케이션 상태를 계산하고 저장하는 기능을 서버로 이동할 수 있습니다. 사용자가 엄청나게 많으면 단순히 서버가 다운될 것이 분명하지만, 사용자 인터페이스가 동일하다는 점이 중요합니다.

예, 물론 이 방법에는 그러한 단점뿐만 아니라 UI의 재사용성, 모든 것을 백 번 이상 로드하지 않도록 UI를 캐시하는 방법도 있습니다. 적절하게 구성되면 대부분의 최신 솔루션과 경쟁할 수 있는 대안이 중요합니다.

이 글을 읽어주신 모든 분들께 진심으로 감사드립니다!

자료 목록:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html