如何減少客戶端的 javascript 檔案大小？

大家好！在這篇文章中我想告訴你如何透過 hmpl 這樣的模板語言來多次減少 javascript 檔案的大小。

文章中出現的技術方法並不新鮮，但今天仍然足夠流行，值得討論。

減小 javascript 檔案的大小將使頁面在客戶端上載入得更快。如果我們採用現代 SPA，即使考慮到所有的縮小，檔案大小仍然很大。當然，一旦加載頁面一次，導航就會更容易，但第一次加載時間本身可能會從一秒到幾分鐘，如果互聯網連接不好的話。很少顧客願意等那麼久。

使用大多數框架和函式庫來建立 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程式碼行，更不用說那些應用程式或多或少的情況了。

即使沒有兩個逗號，也可能會少幾個位元組

這不僅是 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
);

如您所見，使用者介面將相同，但檔案大小會小一些。

即使您縮小檔案並從範本中刪除所有不必要的空格，也許檔案會達到同等水平或更大，但這只是對小範例的假設。如果我們採用大型應用程序，那麼很明顯，採用這種方法，js 會少得多。

從範例中可以看出，如果需要，可以將計算和儲存應用程式狀態的功能移至伺服器。

從範例中可以看出，如果需要，可以將計算和儲存應用程式狀態的功能移至伺服器。很明顯，如果用戶數量龐大，這只會導致伺服器癱瘓，但用戶介面相同這一事實很重要。

是的，當然，這種方法不僅有這樣的缺點，還有UI的可重用性，如何緩存UI以免加載所有內容一百次等等。替代方案很重要，如果配置正確，它可以與大多數現代解決方案競爭。

非常感謝大家閱讀這篇文章！

材料清單：

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

以上是如何減少客戶端的 javascript 檔案大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！