HMPL を使用してクライアント上の JavaScript ファイルのサイズを減らすにはどうすればよいですか?-jsチュートリアル-php.cn

HMPL を使用してクライアント上の JavaScript ファイルのサイズを減らすにはどうすればよいですか?

WBOY

リリース： 2024-08-09 08:32:12

オリジナル

858 人が閲覧しました

皆さん、こんにちは！この記事では、hmpl などのテンプレート言語を使用して JavaScript ファイルのサイズを数倍削減する方法について説明したいと思います。

記事に登場する技術的アプローチは新しいものではありませんが、それでも今日では話題にする価値があるほど人気があります。

JavaScript ファイルのサイズを小さくすると、クライアントでのページの読み込みが速くなります。最新の 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 using HMPL?

カンマが 2 つなくても、数バイト減る可能性があります

これは Vue だけの問題ではなく、同様の方法で動作する他のフレームワークやライブラリにも当てはまります。しかし、それだけではありません。膨大な数の追加モジュールがそれらに接続され、同じ数の追加モジュールがそれらに接続され、以下同様に「無限」になります。

実際、この問題に対する解決策の 1 つはずっと前に提案されており、それは非常に簡単です。それは、サーバー上で 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 using HMPL?