大多數用戶都渴望優雅的 Web 瀏覽體驗，而 JavaScript 長期以來一直是開發人員提供這種提升體驗的最愛。
然而，JavaScript 不僅僅是為了讓網站看起來更漂亮。它還直接影響網站的性能和成功。加快網站速度或縮短頁面載入時間——JavaScript 開發的兩個核心概念——是改善用戶體驗的關鍵因素。
如果您希望在最短的時間內提高您網站的性能，您需要熟悉 JavaScript 縮小。它將幫助您在不改變其功能的情況下從 JavaScript 源代碼中排除所有不必要的字元。更重要的是，它會減少您網站的載入時間和帶寬使用。
JavaScript 縮小可能很棘手。在本文中，我們將繪製一個課程來幫助您縮小 WordPress 和非 WordPress 網站的 JavaScript 代碼。
什麼是 JavaScript？
JavaScript（圖片來源：Medium）
JavaScript 是一種面向文本的腳本語言，用於在客戶端和伺服器端創建互動式網站。它是一種比大多數語言更簡單、更簡單的語言，這解釋了它的廣泛使用。
HTML 和 CSS 構建網站的結構，而 JavaScript 添加了複雜的功能，為您的網站帶來交互性以吸引用戶。例如，JavaScript 提供了複雜的元素，如滾動視頻點唱機、2D/3D 視頻和互動式地圖。
值得注意的是，網路瀏覽器可以理解 JavaScript。因此，除了 HTML 和 CSS 之外，如果您對 Web 開發感興趣，它也是一個不錯的選擇。如果您需要創建一個高度交互的網站，可以在所有瀏覽器中無障礙地運行，那麼 JavaScript 是您可以採用的最可靠的選擇。
信息
Kinsta 客戶可以通過他們的 MyKinsta 儀錶板快速縮小 JavaScript 和 CSS 文件。
什麼是代碼縮小？
縮小也稱為最小化。代碼縮小意味著優化代碼以節省空間、減少頁面載入時間並降低網站帶寬使用。但是，最大的問題是在不改變功能的情況下最小化代碼。
代碼壓縮在所有核心編程技術中都是可能的，包括 HTML、CSS 和——正如我們即將看到的——JavaScript。然而，這個過程不是瞬間的。一些工作致力於使代碼更緊湊，同時保持其功能。
要縮小 JavaScript 代碼，您必須對其進行解析、壓縮並獲取輸出。一旦它被縮小，它應該幾乎是肉眼無法讀取的。您已經刪除了所有不必要的空格、注釋、換行符以及最初使代碼清晰易讀的所有內容。
您可能還必須對代碼進行一些進一步的更改——例如，內聯函數、刪除塊分隔符、使用隱式條件或重寫局部變數。
未縮小與縮小 JavaScript 代碼示例
讓我們看一些示例代碼。第一個塊是常規的、未縮小的 JavaScript：
如您所見，第二個代碼塊更小更緊湊。這意味著它將更快地載入和呈現，減少頁面載入時間並加快內容速度。
在這裡，我們將 529 位元組減少到 324 位元組，獲得了 205 位元組的可用空間並將頁面負載減少了近 40%。
這就像把一本 529 頁的書濃縮成一本 324 頁的書。當然，人類很難閱讀它，但機器會毫無問題地快速通過它。
將多個 JavaScript 文件連接到單個縮小文件時，代碼縮小會減少對伺服器的 HTTP 請求數。這也降低了站點的帶寬消耗。此外，代碼縮小減少了腳本運行的時間——所有這些都會降低您的首位元組時間 (TTFB)。
為什麼要縮小 JavaScript 代碼？
在編寫初始代碼時，大多數開發人員主要專註於完成工作。在這條路上，他們傾向於使用大量的注釋、間距和變數，以使代碼對將來使用它的其他人更具可讀性。
儘管 JavaScript 是一種優秀的編程語言，但它會通過減慢網頁速度來影響網頁。要重新獲得空間並提高頁面載入速度，您必須縮小 JavaScript 代碼。
JavaScript 代碼的縮小版本可以將文件大小減少多達 30-90%。因此，JavaScript 縮小已成為所有開發人員熟悉的習慣。
每個主要的 JavaScript 庫開發人員（Angular、Bootstrap 等）都為生產部署提供了一個縮小版的 JavaScript。每個都使用 min.js 擴展名來表明這一點。
縮小 JavaScript 代碼的好處
以下是使用 JavaScript 縮小後您將獲得的好處的簡要概述：
- 減少頁面載入時間
- 減少網站的帶寬消耗
- 降低腳本執行時間
- 對伺服器的 HTTP 請求更少（並且負載更輕）
- 盜竊保護（縮小或醜化版本很難閱讀和竊取以供重複使用）
JavaScript 縮小、醜化和壓縮之間的區別
JavaScript 縮小、醜化或壓縮的功能相似。但是，它們有不同的目的。
JavaScript uglification 重寫了代碼以降低人類可讀性。該過程刪除了空格、分號和注釋，同時重命名變數和內聯函數以使代碼難以閱讀。
JavaScript 有一個名為 UglifyJS 的庫來自動 uglify 代碼。它提高了性能並降低了可讀性，以使代碼安全且對竊賊不那麼有吸引力。
壓縮不同於縮小或醜化。它使用像 GZIP 這樣的壓縮演算法將代碼重寫為二進位格式，使其更小、載入更快。
雖然縮小意味著減少空格和注釋，但完全醜化代碼會通過更改函數名稱、變數名稱等將其轉換為不可讀的形式。壓縮會以二進位形式重寫代碼以減小文件大小。
縮小和壓縮都是可逆的，這意味著您可以將代碼恢復為原始形式，但醜化是不可逆的。
如何縮小 JavaScript 代碼
您可以通過多種方式縮小 JavaScript 代碼。這些方法中的每一種都採用與其他方法不同的方法。
手動壓縮大型 JavaScript 文件中的所有代碼幾乎是不可能的。手動壓縮 JavaScript 文件僅適用於小文件，因為它非常耗時。
要開始手動 JavaScript 縮小過程，您將在您喜歡的文本編輯器中打開您的 JavaScript 文件並手動刪除所有空格。刪除為 JavaScript 文件設置的所有空格和注釋需要幾分鐘時間。其中一些文本編輯器甚至可能支持正則表達式，這可以顯著加快處理速度。
另一種選擇是在您的計算機上安裝縮小工具並從命令行使用它們。您必須選擇要縮小的文件並將其與目標文件一起添加到命令行開關。然後縮小工具會處理剩下的事情。
如何手動縮小 JavaScript：前 5 種工具
開發人員依靠幾個 JavaScript 縮小工具來縮小代碼並獲得更好的性能。但是，每個開發人員都有自己的偏好並選擇不同的工具。市面上有很多 JavaScript 縮小工具，它們都具有不同的特性，因此您需要仔細考慮您的選擇。
我們沒有根據任何排名或類別列出這些工具。我們只包含了最有效和最流行的 JavaScript 縮小工具。
以下是可以幫助您提高 Web 性能的最佳 JavaScript 縮小工具。
1.JSMin
JSMin 是一個專用的命令行 JavaScript 縮小工具和庫，用於縮小 JavaScript 代碼並使代碼儘可能輕量級。只需將 JSMin 安裝為全局腳本，它就會非常有效地從代碼中刪除所有空格和不必要的注釋。因此，它可以立即將您的 JavaScript 文件大小減少 50% 左右。
因此，減小的尺寸將為快速下載提供機會。您還會注意到，隨著下載新的文學自我文檔的成本，更具交流性的編程風格有所增加。
然而，JSMin 有一個缺點，它不能產生最佳的節省。由於其簡單的演算法，它使許多換行符保持不變。否則，它可能會在代碼中引入新的錯誤。
2. 微軟 Ajax 縮小
Microsoft Ajax Minifier 使您能夠通過減小 JavaScript 和 CSS 文件的大小來提高 Web 應用程序的性能。它會刪除注釋、不必要的空格、分號、函數和括弧。
訂閱時事通訊
想知道我們是如何將流量提高到 1000% 以上的嗎？
加入 20,000 多人的行列，他們會通過 WordPress 內幕技巧獲得我們的每周時事通訊！
現在訂閱
除了縮短局部變數、函數名、引號/雙引號外，結合相鄰的變數聲明，刪除未執行的代碼。
使用 AjaxMin，您可以分析生產力並在後台為 JS minifier 充電。並且，當它完成縮小時，您可以打開生產力文件夾。
3. 谷歌閉包編譯器
Google Closure Compiler 是另一個出色的 JavaScript 縮小工具。它制定了 JavaScript 以實現快速下載和更流暢的性能。它還驗證語法和可更改的建議，刪除死代碼和類型，並通知您有關 JavaScript 的缺點。該工具收集您的 JavaScript，對其進行評估，刪除冗餘代碼並重寫它。
此外，它還為非法 JavaScript 和潛在危險操作提供警告。此外，它是從常規 JavaScript 到更好、更精簡的 JavaScript 的合適編譯器。
4. YUI 壓縮機
YUI 壓縮器是一個命令行 JavaScript 和 CSS 壓縮工具，可確保您獲得比大多數其他工具更高的壓縮率。它是一個用 Java 編寫的縮小工具，依靠 Rhino 來標記源 JavaScript 文件。
首先，YUI 檢查源 JavaScript 文件以確定其結構。然後它列印出令牌流。然後，它會刪除儘可能多的空白字元，並將所有本地符號替換為 1（或 2，或 3）字母符號。
由於 YUI Compressor 是開源的，您可以檢查源代碼以了解其工作原理。此外，YUI 是最安全的 JavaScript 壓縮工具，具有雄辯的壓縮比。
5.UglifyJS
UglifyJS 是最流行的 JavaScript 縮小工具之一。它可以解析、縮小和壓縮 JavaScript 代碼。此外，該工具在壓縮時會生成一個源映射文件以追溯您的原始代碼。
此外，它可以同時獲取多個輸入文件，首先解析輸入文件，然後解析選項。
UglifyJS 按順序解析輸入文件並應用任何壓縮選項。這些文件在相同的全局範圍內解析，這意味著從一個文件到另一個文件中聲明的變數/函數的引用將被適當地匹配。
如何自動縮小 JavaScript：5 大在線工具
有大量的在線 JavaScript 壓縮器可以在線壓縮你的代碼。幾乎所有在線 JavaScript 縮小工具都遵循類似的縮小過程。
首先，您將複製並粘貼 JavaScript 源代碼或將源代碼文件上傳到工具上。然後，如果選項可用，您將優化縮小工具的設置以獲得基於特定需求的輸出。
最後，您將獲取該縮小文件並在網站上使用它，而不是原始的擴展代碼（儘管您應該妥善保管原始源代碼文件，以防萬一）。
這裡有 5 個最好的在線 JavaScript 縮小工具，可以幫助您提高 Web 性能。雖然我們沒有按任何特定順序或類別列出這些工具，但我們只包含了最流行和最有效的 JavaScript 縮小解決方案。
1. Toptal JavaScript Minifier
Toptal JavaScript 縮小工具
Toptal JavaScript 壓縮器提供了一個高效而簡單的在線 JavaScript 壓縮器，您可以在幾秒鐘內壓縮您的 JavaScript。它還允許您將代碼轉換為 .js 文件以供將來使用。
因停機時間和 WordPress 問題而苦苦掙扎？Kinsta 是旨在節省您時間的託管解決方案！查看我們的功能
2.JS壓縮
JSCompress 可以將 JavaScript 的大小縮小 80%。它提供了一個簡單的點擊式界面，您可以在其中粘貼代碼或上傳 .js 文件以進行縮小。您將收到作為乾淨、可複製代碼而不是 .js 文件的縮小輸出。值得注意的是，該工具使用 UglifyJS 和 Babel-minify 來縮小和壓縮 JavaScript。
3. Minifier.org
Minifier.org JavaScript 縮小工具
Minfier.org 是您可以用來縮小代碼的最簡單的 JavaScript 縮小器之一。它使用多種方法來縮小 JavaScript 代碼。該工具會在縮小前後對 JavaScript 代碼的大小進行加權。然後它計算縮小後的腳本增益並將其顯示在屏幕上。
4. TutorialsPoint Online JavaScript Minifier
TutorialsPoint JavaScript Minification Tool
您可以輸入 .js 文件、提供 URL 或直接將原始代碼粘貼到 TutorialsPoint JavaScript 壓縮工具。如果您願意，該工具有一個可直接編碼的可編輯欄位。此外，它具有單擊縮小選項，您可以將縮小後的代碼下載到 .js 文件中。
5. Packer：Dean Edwards JavaScript Compressor
Packer JavaScript Minifier Tool
如果您需要壓縮 JavaScript 代碼，Dean Edwards 的 Packer 可以為您提供最令人滿意的在線 JavaScript 壓縮體驗之一。它適用於 JavaScript 令牌/原子，以及位和位元組模式。
此外，它還允許您在縮小代碼的同時實現 Base62 編碼和收縮變數選項。要縮小 JS 代碼，請將其複製並粘貼到 JavaScript 中，然後按打包按鈕。它會自動為您生成縮小的代碼。
如何在 WordPress 中縮小 JavaScript：前 5 個工具和插件
JavaScript 縮小遵循 WordPress 中的不同過程。縮小 JavaScript 需要主機支持或安裝 WordPress 插件。安裝 WordPress 縮小插件後，它將為您處理縮小過程。
有許多 JavaScript 縮小 WordPress 插件。這些插件中的大多數都遵循相同的縮小程序，並且可以從 WordPress 儀錶板運行。
讓我們探索一些在 WordPress 中進行 JavaScript 修改最有效的工具：
1. MyKinsta 中的代碼縮小 MyKinsta
中的代碼縮小。
如果您是 Kinsta 客戶，您可以使用我們的代碼縮小功能來縮小您網站的 JS 和 CSS 文件。您所要做的就是啟用 Kinsta CDN 並在您的 MyKinsta 儀錶板中勾選幾個複選框。您不必安裝任何第三方插件——您的文件現在將被最小化。
這種縮小發生在 Cloudflare 的邊緣網路上，該網路也為 Kinsta CDN 提供支持。您所有的縮小文件也會緩存在 Cloudflare 的網路上，從而轉化為額外的性能優勢。
2. W3 Total Cache
W3 Total Cache WordPress JavaScript 縮小插件
W3 Total Cache 讓您可以通過精細控制來縮小 JavaScript、CSS 和 HTML。此外，它還允許您縮小內聯、嵌入式或任何第三方 JavaScript 或 CSS 代碼。除了縮小之外，它還推遲了 JavaScript 和 CSS 以加快頁面載入速度。此外，這些插件為 WordPress 網站提供了多種 JavaScript 縮小機會。
3. WP-Optimize
WP-Optimize WordPress JavaScript 縮小插件
WP-Optimize 是一個 WordPress 優化插件，它提供了一個高級縮小工具來縮小 CSS 和 JavaScript，同時清除緩存和優化你的 WordPress 網站。此外，它還使您能夠推遲 CSS 和 JavaScript。因此，網站在主頁載入後載入非關鍵資產，從而提高頁面性能。
4. 自動優化 自動
優化 WordPress JavaScript 縮小插件
Autoptimize 是一個 WordPress 縮小插件，它聚合、縮小和緩存非聚合的 CSS 和 JavaScript，以減少頁面載入時間並提高網站的性能。它可以縮小和緩存腳本，內聯關鍵 JavaScript，以及非同步非聚合 JavaScript。
如果您期待一個主要關注您網站性能的 WordPress JavaScript 縮小插件，那麼 Autoptimize 是一個很好的選擇。
5. Fast Velocity Minify
Fast Velocity Minify WordPress JavaScript 縮小插件
Fast Velocity Minify 為 WordPress 用戶提供高級 JavaScript、CSS 和 HTML 縮小。當第一個未緩存的請求發生時，它會在前端進行縮小。此外，該插件具有簡單的用戶界面和簡單的可用性。
概括
從您的網頁獲得最終性能需要注意次要細節。因此，縮小 HTML、CSS 和 JavaScript 會進入您的網站性能待辦事項列表。
我們已經探索了許多可以幫助您縮小 JavaScript 的工具和插件。但是，每個提到的工具或插件都具有相同的目的並有效地運行。
根據您的用例，從該列表中選擇一個工具並開始縮小您的 JavaScript 代碼以獲得更快的網站性能。
我們是否錯過了您喜歡的任何 JavaScript 縮小工具或 WordPress 縮小插件？請在評價部分留下您的意見！
通過以下方式節省時間、成本並最大限度地提高站點性能：
- 來自 WordPress 託管專家的即時幫助，24/7。
- Cloudflare 企業集成。
- 全球受眾覆蓋全球 29 個數據中心。
- 通過我們內置的應用程序性能監控進行優化。
所有這些以及更多，在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。