JavaScript 壓縮與混淆實戰：Terser 命令行詳解

---

使用 Terser 壓縮 JavaScript 文件（基礎 + 現代語法問題解決）

在前端開發中，隨著業務復雜度增加，JavaScript 文件體積越來越大。
文件大帶來的問題：

• 加載慢：文件越大，瀏覽器下載和解析時間越長。
• 首屏延遲：影響用戶體驗，甚至影響 SEO。
• 代碼可讀性過高：源碼直接暴露，不利于安全。

因此，我們通常會在打包階段對 JS 文件進行壓縮和混淆，以減小體積、加快加載速度、提高代碼安全性。
Terser 就是目前最常用的 JavaScript 壓縮工具之一，支持 ES6+ 語法，并且壓縮效果優異。

---

?? 文章目錄

• 1. 安裝 Terser
• 2. 示例文件
• 3. 壓縮命令
• 4. 壓縮效果
• 5. 常用優化參數
• 6. 壓縮現代 JS 語法報錯的解決方案
• 總結

---

1. 安裝 Terser

npm install terser -g
# 或者
yarn global add terser
AI寫代碼bash
1
2
3

---

2. 示例文件

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("World");
AI寫代碼javascript
運行
1
2
3
4
5

---

3. 壓縮命令

terser src/main.js -o src/main.min.js --compress --mangle
AI寫代碼bash
1

---

4. 壓縮效果

function greet(n){console.log(`Hello, ${n}!`)}greet("World");
AI寫代碼javascript
運行
1

---

5. 常用優化參數

terser src/main.js -o src/main.min.js --compress drop_console=true --mangle
AI寫代碼bash
1

---

6. 壓縮現代 JS 語法報錯的解決方案

如果壓縮時遇到：

ERROR: Unexpected token: punc (.)
AI寫代碼bash
1

并且代碼中有：

app: config.orderInfo?.appPackage || ""
AI寫代碼javascript
運行
1

說明你使用了 ?. 可選鏈 這種 ES2020 語法，舊版 Terser 不支持。

---

方法 1（推薦）：升級 Terser

npm install terser@latest --save-dev
AI寫代碼bash
1

---

方法 2：手動改寫

app: (config.orderInfo && config.orderInfo.appPackage) || ""
AI寫代碼javascript
運行
1

---

總結

• Terser 基礎用法：--compress 壓縮，--mangle 混淆變量。
• 現代語法報錯：升級 Terser 或用 Babel 轉譯。
• 壓縮不僅能減小文件體積，還能提高加載速度和安全性，強烈建議在打包流程中加上。

---

?? 封面圖建議：終端壓縮截圖 + 壓縮前后對比圖
?? 標簽推薦：JavaScript、前端、性能優化、代碼壓縮、Terser