js怎么压缩JS代码

在前端项目开发中，压缩JS代码可以移除代码中的空格、注释、缩短变量名，从而减小文件体积，提升页面加载效率，是项目优化必不可少的环节。下面介绍几种常用的JS代码压缩方法。

手动使用压缩工具压缩JS代码

使用terser工具压缩

terser是目前主流的JS压缩工具，支持ES6及以上语法，使用npm安装后即可通过命令行压缩文件。

首先全局安装terser：

npm install -g terser

安装完成后，压缩单个JS文件的命令如下：

terser input.js -o output.min.js -c -m

其中-c表示启用压缩选项，-m表示启用变量名混淆缩短。如果要压缩多个文件，可以指定多个输入文件：

terser file1.js file2.js -o bundle.min.js -c -m

使用UglifyJS工具压缩

UglifyJS是较早的JS压缩工具，对ES5语法支持较好，同样通过npm安装使用。

安装命令：

npm install -g uglify-js

压缩单个文件的命令：

uglifyjs input.js -o output.min.js -c -m

在构建工具中集成JS压缩

Webpack中配置JS压缩

Webpack5及以上版本默认集成了terser-webpack-plugin，无需额外安装即可自动压缩JS代码，也可以通过自定义配置调整压缩规则。

在webpack.config.js中自定义压缩配置的示例：

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

module.exports = {
  mode: 'production', // 生产模式下默认开启压缩
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除console语句
            drop_debugger: true // 移除debugger语句
          },
          mangle: true // 启用变量名混淆
        }
      })
    ]
  }
};

Vite中配置JS压缩

Vite在生产构建时默认使用esbuild进行JS压缩，速度较快，也可以通过配置调整压缩行为。

在vite.config.js中配置压缩的示例：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'terser', // 可选值 'terser' 或 'esbuild'
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});

压缩前后效果对比

以下是一个简单的JS代码示例，压缩前后的体积变化如下：

压缩前的test.js代码：

// 这是一个测试函数
function calculateSum(a, b) {
  // 计算两个数字的和
  const result = a + b;
  console.log('计算结果:', result);
  return result;
}

const num1 = 10;
const num2 = 20;
const total = calculateSum(num1, num2);

使用terser压缩后的代码：

function calculateSum(a,b){return a+b}const num1=10,num2=20,calculateSum(num1,num2);

可以看到压缩后移除了注释、空格，缩短了变量名，文件体积明显减小。

压缩注意事项

• 压缩前建议保留源代码，压缩后的代码可读性差，难以调试
• 如果项目需要兼容低版本浏览器，需要确认压缩工具的语法支持范围，避免压缩后出现语法兼容问题
• 生产环境建议开启移除console和debugger的配置，减少不必要的代码执行
• 可以在压缩时保留部分需要暴露的变量名，避免混淆后影响外部调用

JavaScriptJS压缩UglifyJSterser修改时间：2026-06-09 13:48:16