---

使用 Terser 壓縮 JavaScript 文件（基礎(chǔ) + 現(xiàn)代語(yǔ)法問題解決）

在前端開發(fā)中，隨著業(yè)務(wù)復(fù)雜度增加，JavaScript 文件體積越來(lái)越大。
文件大帶來(lái)的問題：

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

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

---

?? 文章目錄

• 1. 安裝 Terser
• 2. 示例文件
• 3. 壓縮命令
• 4. 壓縮效果
• 5. 常用優(yōu)化參數(shù)
• 6. 壓縮現(xiàn)代 JS 語(yǔ)法報(bào)錯(cuò)的解決方案
• 總結(jié)

---

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
運(yùn)行
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
運(yùn)行
1

---

5. 常用優(yōu)化參數(shù)

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

---

6. 壓縮現(xiàn)代 JS 語(yǔ)法報(bào)錯(cuò)的解決方案

如果壓縮時(shí)遇到：

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

并且代碼中有：

app: config.orderInfo?.appPackage || ""
AI寫代碼javascript
運(yùn)行
1

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

---

方法 1（推薦）：升級(jí) Terser

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

---

方法 2：手動(dòng)改寫

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

---

總結(jié)

• Terser 基礎(chǔ)用法：--compress 壓縮，--mangle 混淆變量。
• 現(xiàn)代語(yǔ)法報(bào)錯(cuò)：升級(jí) Terser 或用 Babel 轉(zhuǎn)譯。
• 壓縮不僅能減小文件體積，還能提高加載速度和安全性，強(qiáng)烈建議在打包流程中加上。

---

?? 封面圖建議：終端壓縮截圖 + 壓縮前后對(duì)比圖
?? 標(biāo)簽推薦：JavaScript、前端、性能優(yōu)化、代碼壓縮、Terser