大多數使用者都希望有一個優雅的網路瀏覽體驗，而JavaScript長期以來一直是開發者的最愛，以提供這種高階的體驗。
然而，JavaScript不僅是為了讓網站看起來更漂亮。它還直接影響到網站的效能和成功。 加快網站速度或縮短頁面載入時間–這兩個概念是JavaScript開發的核心–是改善使用者體驗的關鍵因素。
如果你想在最短的時間內提升網站的效能，你需要熟悉JavaScript的最小化。它將幫助你從你的JavaScript原始碼中排除所有不必要的字元而不改變其功能。更重要的是，它將減少你的網站的載入時間和頻寬使用。
JavaScript的最小化可能是很棘手的。在這篇文章中，我們將制定一個方案，幫助你為WordPress和非WordPress網站的JavaScript程式碼進行最小化。
什麼是JavaScript？
JavaScript (圖片來源: Medium)
JavaScript是一種面向文字的指令碼語言，用於在客戶端和伺服器端建立互動網站。與大多數語言相比，它是一種更簡單、更不復雜的語言，這也是它被廣泛使用的原因。
HTML和CSS構建了一個網站的結構，而JavaScript增加了複雜的功能，為你的網站帶來互動性，以吸引使用者。例如，JavaScript提供了複雜的元素，如滾動的視訊點唱機、2D/3D視訊和互動地圖。
值得注意的是，網路瀏覽器可以理解JavaScript。因此，與HTML和CSS一起，如果你對網路開發感興趣，它是一個熟練的選擇。如果你需要建立一個高度互動的網站，並在所有瀏覽器中無障礙執行，那麼JavaScript是你可以採用的最可靠的選擇。
什麼是程式碼最小化？
最小化也被稱為最小化。程式碼最小化意味著優化程式碼，以節省空間，減少頁面載入時間，並降低網站頻寬使用。然而，最大的問題是在不改變功能的情況下最小化程式碼。
程式碼最小化在所有核心程式設計技術中都是可能的，包括HTML、CSS，以及–正如我們即將看到的–JavaScript。然而，這個過程並不是一蹴而就的。在保持程式碼功能的同時，還要做一些工作來使其更加緊湊。
為了最小化JavaScript程式碼，你必須解析它，壓縮它，並獲得輸出。一旦它被最小化，它應該是肉眼幾乎無法閱讀的。你已經刪除了所有不必要的空白、註釋、換行符，以及最初使程式碼可讀的一切。
你可能還需要對程式碼做一些進一步的修改–例如，行內函數、刪除塊定界符、使用隱含條件，或者重寫區域性變數。
未簡化與簡化的JavaScript程式碼示例
讓我們來看看一些示例程式碼。這第一塊是普通的、沒有經過刪減的JavaScript。
// program to check if the string is palindrome or not
function checkPalindrome(str) {
// find the length of a string
const len = string.length;
// loop through half of the string
for (let i = 0; i < len / 2; i++) {
// check if first and last string are same
if (string[i] !== string[len - 1 - i]) {
return 'It is not a palindrome';
}
}
return 'It is a palindrome';
}
// take input
const string = prompt('Enter a string: ');
// call the function
const value = checkPalindrome(string);
console.log(value);
現在，讓我們看看同樣的程式碼在被簡化後的樣子：
function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++)
if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"}
const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);
正如你所看到的，第二個程式碼塊要小得多，也更緊湊。這意味著它將更快地載入和渲染，減少頁面載入時間，加快內容速度。
在這裡，我們將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的uglification重寫了程式碼，使其不那麼容易被人閱讀。這個過程刪除了空白、分號和註釋，同時重新命名變數和行內函數，使程式碼難以閱讀。
JavaScript有一個名為UglifyJS的庫，可以自動對程式碼進行美化。它提高了效能，降低了可讀性，使程式碼安全，對盜賊的吸引力降低。
壓縮與最小化或美化不同。它使用像GZIP這樣的壓縮演算法，將程式碼重寫成二進位制格式，使其更小，載入更快。
最小化是指減少空白和註釋，而完全醜化則是通過改變函式名、變數名等將程式碼轉變為不可讀的形式。而壓縮則是將程式碼以二進位制形式重寫，以減少檔案大小。
最小化和壓縮都是可逆的，這意味著你可以將程式碼變回原來的形式，但醜化是不可逆轉的。
如何最小化JavaScript程式碼
你可以通過各種方式來簡化你的JavaScript程式碼。這些方法中的每一種都採取了與其他方法不同的方法。
手動將大的JavaScript檔案中的所有程式碼最小化，這幾乎是不可能的。手動最小化JavaScript檔案只可能用於小檔案，因為它是如此的耗時。
要開始手動減化JavaScript的過程，你會在你最喜歡的文字編輯器中開啟你的JavaScript檔案，然後一個接一個地手動刪除所有的空格。這將需要幾分鐘時間來刪除所有為JavaScript檔案設定的空格和註釋。有些文字編輯器甚至可能支援正規表示式，這可以大大加快這一過程。
另一個選擇是在你的電腦上安裝最小化工具，並從命令列中使用它們。你必須選擇你想要最小化的檔案，並將其與目標檔案一起新增到命令列開關中。然後，最小化工具就會處理其餘的事情了。
如何利用工具手動最小化JavaScript
開發人員依靠幾個JavaScript最小化工具來最小化程式碼並實現更好的效能。然而，每個開發者都有自己的個人偏好，選擇不同的工具。現在有很多的JavaScript最小化工具，它們都有獨特的品質，所以你需要仔細考慮你的選擇。
我們並沒有根據任何排名或類別來列出這些工具。我們只包括最有效和最流行的JavaScript最小化工具。
這裡是最好的JavaScript最小化工具，可以幫助你提高你的網路效能。
1. JSMin
JSMin是一個專門的命令列JavaScript最小化工具和庫，用於最小化JavaScript程式碼，使程式碼儘可能輕量化。只要把JSMin安裝成一個全域性指令碼，它就會非常有效地刪除程式碼中所有的空白和不必要的註釋。因此，它可以立即將你的JavaScript檔案大小減少50%左右。
所以，減少的大小會給快速下載帶來機會。你還會注意到，作為下載新的、文學性的自我檔案的代價，更多的交流性的程式設計風格也在增加。
然而，JSMin有一個缺點，它不能產生最佳的節省。由於其簡單的演算法，它使許多換行字元沒有改變。否則，它可能會在程式碼中引入新的錯誤。
2. Microsoft Ajax Minify
Microsoft Ajax Minifier使你能夠通過減少JavaScript和CSS檔案的大小來提高你的Web應用程式的效能。它刪除了註釋、不必要的空間、分號、函式和括號。
除了縮短區域性變數、函式名、引號/雙引號，合併相鄰的變數宣告，刪除未執行的程式碼。
使用AjaxMin，你可以分析生產力，並在後臺對JS minifier進行收費。而且，當它完成了minification後，你可以開啟生產力資料夾。
3. Google Closure Compiler
Google Closure Compiler是另一個優秀的JavaScript最小化工具。它制定了JavaScript的快速下載和更流暢的效能。它還驗證了語法和可更改的建議，刪除了死程式碼和型別，並通知你有關JavaScript的缺點。這個工具收集你的JavaScript，評估它，刪除多餘的程式碼，並重寫它。
另外，它還對非法的JavaScript和潛在的危險操作提供警告。此外，它是一個適當的編譯器，從普通的JavaScript到一個更好的和最小化的JavaScript。
4. YUI Compressor
YUI compressor是一個命令列的JavaScript和CSS最小化工具，它保證你比其他大多數工具有更高的壓縮率。它是一個用Java編寫的最小化工具，依靠Rhino對源JavaScript檔案進行標記。
首先，YUI檢查源JavaScript檔案以確定其結構。然後，它列印出令牌流。然後，它刪除儘可能多的空白字元，並用1（或2，或3）個字母符號替換所有的區域性符號。
由於YUI壓縮器是開源的，你可以檢查原始碼以瞭解它的工作原理。此外，YUI是最安全的JavaScript最小化工具，具有雄辯的壓縮率。
5. UglifyJS
UglifyJS是最流行的JavaScript最小化工具之一。它可以解析、減化和壓縮JavaScript程式碼。此外，該工具在壓縮的同時會生成一個原始碼地圖檔案，以追蹤到你的原始程式碼。
而且，它可以同時接受多個輸入檔案，先解析輸入檔案，再解析選項。
UglifyJS按順序解析輸入檔案並應用任何壓縮選項。檔案是在同一個全域性範圍內解析的，這意味著一個檔案對另一個檔案中宣告的變數/函式的引用將被適當匹配。
如何利用線上工具自動最小化JavaScript
有大量的線上JavaScript最小化工具可以線上壓縮你的程式碼。幾乎所有的線上JavaScript最小化工具都遵循一個類似的最小化過程。
首先，你會複製並貼上你的JavaScript原始碼，或者在工具上上傳原始碼檔案。然後，如果有選項的話，你將優化最小化工具的設定，以獲得基於特定要求的輸出。
最後，你會拿著這個最小化的檔案在網站上使用，而不是原始的、擴充套件的程式碼（當然你應該把原始的原始碼檔案儲存起來，以防萬一）。
這裡有5個最好的線上JavaScript最小化工具，可以幫助你豐富你的網路效能。雖然我們沒有按任何特定的順序或類別列出這些工具，但我們只包括最流行和最有效的JavaScript最小化解決方案。
1. Toptal JavaScript Minifier 
Toptal JavaScript最小化工具
Toptal JavaScript Minifier提供了一個高效而直接的線上JavaScript minifier，你可以在幾秒鐘內濃縮你的JavaScript。它還允許你將程式碼轉換為一個.js檔案，以便將來使用。
2. JSCompress
JSCompress可以將你的JavaScript最小化並減少80%的大小。它提供了一個簡單的點選操作介面，你可以貼上你的程式碼或上傳你的.js檔案進行減化。 你將會收到壓縮後的輸出，作為乾淨的、可複製的程式碼，而不是一個.js檔案。值得注意的是，該工具使用UglifyJS和Babel-minify來最小化和壓縮JavaScript。
3. Minifier.org 
Minifier.org JavaScript最小化工具
Minfier.org是最簡單的JavaScript最小化器之一，你可以利用它來最小化你的程式碼。它使用多種方法來最小化JavaScript程式碼。該工具對你的JavaScript程式碼在最小化之前和之後的大小都進行了衡量。然後，它計算出指令碼在最小化後的收益，並將其顯示在螢幕上。
4. TutorialsPoint
Tutorialspoint JavaScript最小化工具
你可以輸入一個.js檔案，提供一個URL，或者直接將你的原始程式碼貼上到TutorialsPoint JavaScript最小化工具。該工具有一個可編輯的欄位，如果你願意，可以直接編碼。此外，它還有一個單次點選減化的選項，你可以將減化後的程式碼下載到一個.js檔案中。
5. Packer: Dean Edwards JavaScript Compressor 
Packer JavaScript最小化工具
如果你需要壓縮你的JavaScript程式碼，Dean Edwards的Packer可以為你提供最滿意的線上JavaScript壓縮體驗之一。它適用於JavaScript標記/原子，以及位元和位元組模式。
此外，它可以讓你在壓縮程式碼時實現Base62編碼和收縮變數選項。要最小化你的JS程式碼，將其複製並貼上到JavaScript中，然後按下打包按鈕。它將自動為你生成最小化的程式碼。
如何在WordPress中最小化JavaScript
在WordPress中，JavaScript的最小化遵循一個不同的程式。對JavaScript進行最小化需要主機支援或安裝一個WordPress外掛。安裝一個WordPress的最小化外掛後，它將為你處理最小化過程。
有許多JavaScript最小化的WordPress外掛。這些外掛中的大多數都遵循相同的最小化程式，可以從WordPress儀表板上執行。
讓我們來探索一些在WordPress中修改JavaScript的最有效的工具。
1. W3 Total Cache 
W3 Total Cache
W3 Total Cache可以讓你對JavaScript、CSS和HTML進行細化控制。此外，它允許你對內聯、嵌入或任何第三方的JavaScript或CSS程式碼進行最小化。除了最小化之外，它還可以延遲JavaScript和CSS，以加快頁面載入。此外，該外掛為WordPress網站提供了多種JavaScript減化機會。
2. WP-Optimize 
WP-Optimize
WP-Optimize是一個WordPress優化外掛，它提供了一個先進的最小化工具，在清除快取和優化你的WordPress網站的同時，對CSS和JavaScript進行最小化。此外，它還使你有能力推遲CSS和JavaScript。因此，網站在主頁面載入後再載入非關鍵資產，提高頁面效能。
3. Autoptimize 
Autoptimize
Autoptimize是一個WordPress的最小化外掛，它可以聚合、最小化和快取非聚合的CSS和JavaScript，以減少頁面載入時間，提高網站的效能。它可以對指令碼進行最小化和快取，內聯關鍵的JavaScript，並非同步處理非聚合的JavaScript。
如果你正在尋找一個WordPress的JavaScript最小化外掛，它將主要關注你的網站效能，Autoptimize是一個很好的選擇。
4. Fast Velocity Minify 
Fast Velocity Minify
Fast Velocity Minify為WordPress使用者提供先進的JavaScript、CSS和HTML最小化。當第一個未快取的請求發生時，它就會在前臺進行粉碎處理。此外，該外掛有一個直截了當的使用者介面和簡單易用性。
小結
要從你的網頁中獲得最終的效能，需要注意一些小細節。因此，將HTML、CSS和JavaScript最小化進入你的網站效能待辦事項清單。
我們已經探索了許多工具和外掛，它們可以協助你進行JavaScript最小化。然而，每一個提到的工具或外掛都有相同的目的，並有效地執行。
根據你的使用情況，從這個列表中選擇一個工具，開始最小化你的JavaScript程式碼，以提高網站效能。
評論留言