通常，在長期從事一個專案時，您會注意到加入的功能越多，Web 應用程式變得越慢。但是，加入table 、 button或其他在某種情況下相當重的東西似乎毫無意義。結果，您會得到不可接受的初始負載，例如，這可能需要超過 10-30 秒的時間。
在本文中，我想考慮一些方法和小技巧來幫助您避免這種情況，並使您的網站盡可能快速加載且體積更小。
🐜 使用 HMPL.js 實作面向伺服器的方法
與下面描述的方法不同，該模組不允許機器人對頁面進行索引，但您可以將其連接到任何 Web 應用程式，或者只是連接到任何網站，無論是 WordPress、Vue.js、Tilda、Next.js 還是任何您想要的地方。
使用該模組看起來就像這樣：
索引.html
<main id="app"></main>
<script src="https://unpkg.com/json5/dist/index.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>客戶端.js
const templateFn = hmpl.compile(
`<div>
<button data-action="increment" id="btn">Click!</button>
<div>Clicks: {{ src: "/api/clicks", after: "click:#btn" }}</div>
</div>`
);
const clicker = templateFn(({ request: { event } }) => ({
body: JSON.stringify({ action: event.target.getAttribute("data-action") })
})).response;
document.querySelector("#app").append(clicker);在這裡，我們也得到了渲染的 HTML，但我們沒有一個明確的架構可以遵循。我們可以為任何專案停用或啟用該模組，不會產生任何後果。它也易於使用，因為它包含少量但必要的功能。另外，在範例中，您可以在 DOM 渲染期間安全地after並載入元件。
{% cta https://github.com/hmpl-language/hmpl %} 🌱 查看 HMPL ★{% endcta %}
⚙️ 平台依賴性
如果你想減少一個Web應用程式的大小，那麼首先你需要從你使用的平台開始。如果我們採用 Next.js，那麼這些就是一些方法，但如果這些是自寫的網站，那麼這些會略有不同。
因此，首先，值得研究如何配置相同的框架或庫，以便它們提供更好的結果，只需更改幾個設置，例如，對伺服器請求的響應的相同緩存，或用於圖像的附加元件 - 所有這些有時已經內置在配置本身中，剩下的就是找到它。
👀 從 CSR 遷移到 SSR（SSG、ISG 等）
減少套件大小的最佳方法之一是將頁面各部分的渲染從客戶端轉移到伺服器。這樣你就可以獲得一種框架，其中的元件將被一點一點地載入。因此，此類專案的 HTML 和 JS 來源檔案的大小將僅包含空標籤和對伺服器的請求，伺服器會將現成的元件放置在那裡。
以下程式碼就是這種方法的一個範例：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= data.title %></title>
</head>
<body>
<h1><%= data.title %></h1>
<p><%= data.content %></p>
</body>
</html>伺服器.js
const express = require('express');
const app = express();
const PORT = 3000;
// Set EJS as the templating engine
app.set('view engine', 'ejs');
// Sample data
const data = {
title: 'Server Side Rendering Example',
content: 'This is an example of Server Side Rendering using Node.js and EJS.'
};
// Define a route
app.get('/', (req, res) => {
// Render the HTML using EJS
res.render('index', { data });
});
// Start the server
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});這裡我們看到，借助 EJS 和 Express，我們可以在伺服器上呈現所有內容。另外，我們可以為 Next.js 重新設計網站，這樣我們不僅在一個頁面上實現了類似的效果，而且在其他頁面上也實現了類似的效果，包括動態路由，當然還有 robots 的索引。
但是，這種製造 SSR（SSG、ISG 等）的方法有嚴重的缺點，因此可能不太適用。例如，如果網站已經採用一些專注於客戶端的框架或庫，那麼重新做一切可能會花費大量的金錢和時間。此外，選擇此類工具（Next.js 除外）的特殊性可能會導致適合這些任務的人員短缺。如果一個人學會了某個框架，而這個空缺的庫又不是很受歡迎，很難找到替代的，那麼找應徵者就會很成問題。
為了保持面向伺服器的方法，同時不出現上述重大問題，您可以使用 HMPL.js 或類似的程式庫。
🔎 其他有助於減少 bundle 大小的一般方法
在這裡，如果我們不使用伺服器，而只是常規地使用 Web 應用程式，那麼下面描述的方法也可以幫助減少捆綁包的大小：
-
🔗 刪除不必要的依賴項
有時，在開發 Web 應用程式的過程中，您需要建立一些功能，然後下載不同的軟體包、嘗試它們，然後選擇最適合該任務的軟體包。如果忘記刪除它們，則捆綁包的大小只會變得更大。或者，如果一個巨大的模組連接到一個可以用常規 js 解決的任務並從那裡使用一個函數 - 這也是毫無意義的。
例如，要分析未使用的套件，您可以使用以下套件或類似的套件：
npm install depcheck
depcheck /path/to/my/project或者
npx depcheck該模組雖然不受支持，但仍允許您分析依賴關係並辨識未使用的依賴關係。但是，您需要小心使用它，因為看起來某些東西沒有被使用，但如果沒有它，某些模組將無法工作 - 這也需要控制。
您也可以透過以下指令使用 npm 的內建功能：
npm prune此命令刪除“多餘的”包。如果提供了套件名稱，則只刪除與提供的名稱之一相符的套件。
-
📷 在專案中使用較小尺寸的媒體文件
這可能是最簡單、最明顯的建議之一。如果您的專案中有一個影片的大小與整個 Web 應用程式的大小相同，那麼使用相同的git clone進行操作將非常困難。
這種做法對於圖像非常有用，您可以為每個圖像節省幾 MB 而不會損失任何品質。如今，線上壓縮平台可以輕鬆做到這一點。
另外，您可以將影像解析度從 png、jpg 變更為 webp。這也是一個很好的做法，很多大型Web應用程式都有採用。
-
📡 使用 CDN
這也是將模組從npm_modules轉移到外部環境的常用方法之一。
import { chunk } from "lodash";或者
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>它與之前描述的有些相似，但含義略有不同。
4.✂️ 程式碼分割
分割程式碼最簡單的方法之一是使用動態導入。在 Webpack 和 Vite 等現代打包工具中，你可以輕鬆地寫如下內容：
主.js
document.getElementById('loadButton').addEventListener('click', () => {
import('./module.js')
.then(module => {
module.default();
})
.catch(err => {
console.error('Error loading the module:', err);
});
});在這種情況下，我們不會立即加載模組，而僅在必要時，即按下按鈕時加載。
您也可以啟用區塊分割。這對於分離不同模組之間的通用程式碼很有用。
webpack.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};-
</> 程式碼壓縮
如果在編譯程式碼時套用最小化，您也可以減少捆綁包的大小。這可能是您可以使用的最佳方法之一。
uglifyjs file.js -c toplevel,sequences=false為此，您可以使用 Uglify.js，它是最受歡迎的程式碼壓縮工具之一。當然，如果它或類似的捆綁器沒有預設包含在內，它也可以與捆綁器一起使用。
結論
首先，從列出的所有內容中，我試圖描述適用於幾乎所有 Web 應用程式的最通用的方法。在設定此類任務時，它們是最受歡迎的。我也不想寫一些關於 DRY、KISS 原則的愚蠢建議，這些原則在減少程式碼方面已經很明顯了，我想要更具體的內容。但無論如何，我希望這些方法能幫助您讓您的網站變得更小、更快！
您可以在 Twitter 上關注作者！
{% 嵌入 https://x.com/aanthonymax/status/1902809833033859568 %}
非常感謝大家閱讀這篇文章❤️！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式