TL;DR
當您使用現代框架時，首先出現的問題是您產生的套件的大小。
是的，當然不是最重要的，但客戶並不關心開發人員如何完成專案。他希望網站能夠快速載入！
因此，在本文中，我想介紹一種小型模板語言，它可以幫助您製作相同的應用程式，但所需的努力卻少得多。
好吧，讓我們看看這個專案是什麼🔎
👀 有沒有減少建造尺寸的例子？
我們將在Next.js和HMPL.js上進行一個具體的應用，看看它最終的重量是多少。
📦Next.js建置：
📦HMPL.js建置：
此版本比 Next.js 版本小 10 倍。此外，我們保留了介面的原始形式，同時不損失任何優勢（除了 robots 索引）。
這只是一個普通的登陸頁面，沒有任何花哨的設計。橫幅廣告中只有幾個動畫，還有一個限時優惠的倒數計時。
另外，如果你能點個星支持這個計畫就更好了！謝謝❤️！
{% cta https://github.com/hmpl-language/hmpl %} 💎 星標 HMPL ★{% endcta %}
📊 它與其他模組相比如何？
顯然，採用 Next.js 並不完全公平，因為它有點不同，但無論如何它是公平的，因為我們的目標是建立一個具有良好介面的網站，並且為此目的一切手段都是好的。
但讓我們嘗試將它與類似的模組進行比較：
從這裡也可以清楚地看出，即使我們將它們與本質上做同樣事情的 Alpine.js 進行比較，本次測試的應用程式結果也較小。
🖋 模板語言的語法是什麼樣的？
模板語言為HTML提供了以下區塊擴充：
<div class="wrapper">
{{#request src="/api/my-component.html"}}
{{#indicator trigger="pending"}}
<p class="my-indicator">Loading...</p>
{{/indicator}}
{{/request}}
</div>這裡我們描述了一個特定的元件（它實際上不是一個元件，因為它是一個輔助塊），但無論如何，對於一般理解來說，它是完美的。我們載入的不是它（就像outerHTML一樣），而是從伺服器取得的 HTML。
⚙️ 嘗試這個專案
-
套件管理器：您可以在終端機中輸入
npm i hmpl-js來安裝它 -
CDN 方法：您可以透過在 HTML 中嵌入以下腳本標籤直接從 CDN 載入這些庫：
<script src="https://unpkg.com/json5/dist/index.min.js"></script>
<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>- 本機設定：如果您喜歡離線使用，請下載檔案並自行託管 - 功能保持不變。
✅ 我們的程式碼是開源的
所以你也可以參與！我們歡迎大家積極參與，並希望這個計畫變得更好！
GtiHub 倉庫： https://github.com/hmpl-language/hmpl
非常感謝你閱讀這篇文章！希望這個計畫對你有幫助！ ❤️
💬你怎麼看？歡迎在留言區留言，一定會很有趣！
原文出處：https://dev.to/hmpljs/hmpljs-small-template-language-reduce-the-build-size-several-times-k94
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式