如今，網站建立的趨勢正在改變。隨著 Next.js 的出現，大多數開發人員已經開始使用 SSR（伺服器端渲染）的概念，它允許直接在後端產生動態標記。但是由於這種做法是由於它是一個框架而具有架構性的，因此您將無法正常地組合它，例如，如果您的網站已經用 Vue 編寫。
微前端概念在這方面有所幫助，但同樣，對於預算開發來說，這是一個太昂貴的方案，因此為了輕鬆實現 SSR（無需機器人），開發了這種模板語言。
🐜HMPL
HMPL是一種模板語言，它用請求物件來補充常規 HTML。也就是說，你可以在標記中直接描述你想要透過什麼 API 路徑來取得元件。
import hmpl from "hmpl-js";
// We create a constructor function
// that will generate instances to receive our elements.
const templateFn = hmpl.compile(
`<div>
<h1>
{
{
src: "http://localhost:8000/api/getTitle"
}
}
</h1>
</div>`
);
// Generate an instance and get an element from it
const content = templateFn().response;
// Mounting our element into the DOM
document.querySelector("#app").append(content);🌷 範例應用程式
使用該模組，建立了一個圖庫應用程式，實現在伺服器上動態內容傳遞。
{% 嵌入 https://x.com/i/status/1881332519859319143 %}
範例本身位於此處的GitHub 儲存庫中。
此外，如果您能用自己的明星來支持該專案那就太好了！謝謝❤️！
{% cta https://github.com/hmpl-language/hmpl %} 💎 星級 HMPL ★{% endcta %}
📊 尺寸比較
讓我們來比較一下兩個具有相同UI的應用程式的程式碼，看看它們的大小：
![HMPL App 與 Vue App 大小對比
（或可以是任何流行的框架或函式庫）]（https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ri7x1nvvfdv5fnirp8by.png）
我們可以看到，HMPL 點擊器的檔案大小比相同的 Vue 點擊器介面要小。
另外，也與其他流行的 UI 建立工具和純 JS 進行了比較：
結果是基於對此儲存庫中呈現的應用程式大小的比較。
⚙️ 安裝
-
Node 套件管理器：你可以使用指令
npm i hmpl-js透過 npm 下載它 -
內容傳遞網路：您可以使用以下程式碼透過 CDN 包含具有依賴關係的檔案：
<script src="https://unpkg.com/json5/dist/index.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>- 本地：或者，有一個與第二個類似的選項，只需將檔案下載到本機。
💬 回饋
您可以在評論中寫下您對該模組的想法，閱讀起來會很有趣！或者，有一個用於提問和建議的主題不和諧頻道，我或其他人會嘗試回答！
✅ 該專案是開源的
所以你也可以參加！這也意味著您可以將其用於商業目的：
倉庫： https://github.com/hmpl-language/hmpl
網址：https: //hmpl-lang.dev
感謝您的閱讀！
原文出處：https://dev.to/hmpljs/we-build-hmpl-to-help-developers-make-web-apps-smaller-in-size-53eg
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式