---

使用 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

---

2. 示例文件

function greet(name) {console.log(`Hello, ${name}!`);
}greet("World");

---

3. 压缩命令

terser src/main.js -o src/main.min.js --compress --mangle

---

4. 压缩效果

function greet(n){console.log(`Hello, ${n}!`)}greet("World");

---

5. 常用优化参数

terser src/main.js -o src/main.min.js --compress drop_console=true --mangle

---

6. 压缩现代 JS 语法报错的解决方案

如果压缩时遇到：

ERROR: Unexpected token: punc (.)

并且代码中有：

app: config.orderInfo?.appPackage || ""

说明你使用了 ?. 可选链 这种 ES2020 语法，旧版 Terser 不支持。

---

方法 1（推荐）：升级 Terser

npm install terser@latest --save-dev

---

方法 2：手动改写

app: (config.orderInfo && config.orderInfo.appPackage) || ""

---

总结

• Terser 基础用法：--compress 压缩，--mangle 混淆变量。
• 现代语法报错：升级 Terser 或用 Babel 转译。
• 压缩不仅能减小文件体积，还能提高加载速度和安全性，强烈建议在打包流程中加上。

---

🖼 封面图建议：终端压缩截图 + 压缩前后对比图
🏷 标签推荐：JavaScript、前端、性能优化、代码压缩、Terser

---

💬 点个赞再走呗 ❤️：

你在压缩 JS 时遇到过哪些问题？欢迎留言讨论。关注我，获取更多前端性能优化与构建工具实战 🚀

---