在线 JavaScript 压缩工具：减小 JS 文件体积加速页面加载

code2026-07-252 分钟阅读

什么是 JavaScript 压缩

JavaScript 压缩（JS Minification）是移除 JS 文件中不必要的字符（空白、注释、短变量名等）以减小文件体积的过程。高级压缩工具还会进行代码优化，如死代码消除、常量折叠等。

压缩前后对比

压缩前：

// 计算两个数的和
function addNumbers(a, b) {
    // 返回两数之和
    var result = a + b;
    return result;
}

var x = 10;
var y = 20;
console.log(addNumbers(x, y));

压缩后：

function addNumbers(a,b){return a+b}console.log(addNumbers(10,20));

为什么需要 JS 压缩

JavaScript 是体积最大的资源：通常占页面总大小的 40-70%
压缩率高：压缩率通常 40-70%
JS 是解析阻塞资源：更小的文件 = 更快的解析和执行
提升 Core Web Vitals：减少 LCP（最大内容绘制）时间
节省 CDN 带宽：流量费用显著降低
移动端优化：手机 CPU 解析速度较慢，压缩尤为重要

JS 压缩策略

| 策略 | 说明 | 示例 | |------|------|------| | 移除空白 | 压缩空格、换行、缩进 | — | | 移除注释 | 删除单行和多行注释 | — | | 变量名缩短 | 局部变量重命名为短名称 | result → r | | 死代码消除 | 移除不可达代码 | — | | 常量折叠 | 编译时计算常量表达式 | 2+3 → 5 | | 内联函数 | 将简单函数调用替换为函数体 | — | | 属性访问点号 | obj["name"] → obj.name | — |

如何使用在线工具

使用 DevToolkit Pro 的 JavaScript 压缩工具：

粘贴 JavaScript 代码
选择压缩选项（变量缩短、死代码消除等）
实时显示压缩后的代码
显示压缩率和节省的字节数

构建工具中的 JS 压缩

Webpack（TerserPlugin）

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,    // 移除 console.log
            drop_debugger: true,   // 移除 debugger
            pure_funcs: ['console.log'] // 标记纯函数可移除
          },
          mangle: true // 变量名缩短
        }
      })
    ]
  }
};

Vite

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'terser', // 使用 terser 压缩
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});

esbuild（Vite 默认）

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'esbuild' // esbuild 比 terser 快 10-100 倍
  }
});

JS 压缩工具对比

| 工具 | 速度 | 压缩率 | 生态 | |------|------|--------|------| | esbuild | 极快 | 良好 | Vite 默认 | | terser | 中等 | 最优 | Webpack 默认 | | SWC | 快 | 良好 | Next.js 默认 | | uglify-js | 中等 | 良好 | 经典工具 |

FAQ

压缩后的代码还能调试吗？

压缩后代码难以阅读。解决方案：生成 Source Map 文件。浏览器开发者工具可以通过 Source Map 显示原始代码，同时生产环境使用压缩版本。

为什么 console.log 要移除？

console.log 语句：

占用额外空间
在生产环境中泄露调试信息
有微小的性能开销

使用 terser 的 drop_console: true 配置自动移除。

esbuild 和 terser 该选哪个？

优先选择 esbuild：速度快 10-100 倍，适合大型项目。如果需要更精细的压缩控制（如自定义混淆策略），使用 terser。Vite 默认使用 esbuild，Webpack 默认使用 terser。

本文由 DevToolkit Pro 提供。更多开发者工具请访问首页。

← 返回博客

DevToolkit Pro