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

皆さん、こんにちは！この記事では、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 でかなりの量のコード行が必要になります。

カンマが 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 は同じですが、ファイル サイズが少し小さくなります。

ファイルを縮小し、テンプレートから不要なスペースをすべて削除したとしても、ファイルは同等かそれより大きくなる可能性がありますが、これは小規模な例での単なる仮定です。大規模なアプリケーションを使用する場合、このアプローチでは js が大幅に少なくなるのは明らかです。

この例からわかるように、アプリケーションの状態を計算して保存する機能は、必要に応じてサーバーに移動できます。

この例からわかるように、アプリケーションの状態を計算して保存する機能は、必要に応じてサーバーに移動できます。膨大な数のユーザーがいる場合、サーバーがダウンするだけであることは明らかですが、ユーザー インターフェイスが同じであるという事実は重要です。

はい、もちろん、この方法にはそのような欠点があるだけでなく、UI の再利用性、すべてを 100 回もロードしないように UI をキャッシュする方法などの問題もあります。代替手段は重要であり、適切に構成されていれば、ほとんどの最新のソリューションと競合できます。

この記事を読んでいただきありがとうございます!

素材のリスト:

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

以上がクライアント上のJavaScriptファイルのサイズを減らすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。