如何基于vite实现清除特定环境下的console和debugger

一、解决方法

方法一：使用esbuild

直接在vite.config.ts文件中写，无需下载插件

export default defineConfig(({ mode }) => {
  // 环境变量
  const env = loadEnv(mode, root, "");
  return {
    base: env.VITE_PUBLIC_PATH,
    plugins: [
      vue(),
      ...
    ],
    resolve: {
      ...
    },
    server: {
     ...
    },
    esbuild: {
      drop: mode === "production" ? ["console", "debugger"] : []
    }
  };
});

若无需环境配置，可改为

esbuild: {
      drop:["console", "debugger"]
    }

方法二：使用terser

第一步：安装terser插件

npm i -g terser 

在package.json中出现如下即为安装成功 

第二步：在vite.config,ts中写入

export default defineConfig(({ mode }) => {
  // 环境变量
  const env = loadEnv(mode, root, "");
  return {
    base: env.VITE_PUBLIC_PATH,
    plugins: [
      vue(),
      ...
    ],
    resolve: {
      ...
    },
    server: {
     ...
    },
    build: {
      minify: "terser",
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: mode === "production",
          //生产环境时移除debugger
          drop_debugger: mode === "production"
        },
        output: {
          // 去除注释
          comments: false, 
        },
        //是否压缩变量名
        mangle: false,
      },
      rollupOptions: {
        ...
      }
    }
  };
});

若无需环境配置，可改为

build: {
      minify: "terser",
      terserOptions: {
        compress: {
          //移除console
          drop_console: true,
          //移除debugger
          drop_debugger: true
        },
        output: {
          // 去除注释
          comments: false, 
        },
         //是否压缩变量名
        mangle: false,
      },
      rollupOptions: {
        ...
      }
    }

二、terser简介

Terser 是一个 JavaScript 代码压缩工具，通过去除不必要的空格、换行和注释，能够减少 JavaScript 文件的大小，提高页面加载速度。

可以通过下面这个网站体会压缩过程：

https://www.toptal.com/developers/javascript-minifier

三、代码压缩的原理

Terser工作原理的核心在于代码压缩和混淆技术。

1.代码压缩

• 移除代码中的所有不必要的空白字符、注释以及未使用的代码（死代码）
• 对变量名、函数名进行缩短（缩短作用域内未混淆的标识符）
• 代码的重组，这一步骤涉及将代码重写为更紧凑的语法形式，例如，将多个变量声明合并为一个，或者将多个小的条件表达式合并为一个大的表达式。

2.混淆技术

混淆技术是提高JavaScript代码安全性的重要手段。其主要目的是使代码难以被人类理解，同时也尽量避免影响到运行时的性能。

• 变量名和函数名缩短
• 属性名缩短 ：作用于对象属性。
• 作用域分析 ：通过分析变量的作用域，确保只有在必要时才进行变量提升
• 字符串保护 ：避免直接在代码中暴露敏感字符串，通过一些特殊处理使字符串在压缩后的代码中不易被轻易识别。

但是过分的混淆可能导致性能下降或调试困难，因此通常需要在压缩率和代码可读性之间做出平衡。