前言

近日在把公司的项目改成vite架构，在更改打包配置的时候遇到如题问题，借此记录一下。

vite minify 2种压缩工具

首先说一下，vite是将 Esbuild 作为生产环境下默认的压缩工具的，至于为什么？ 是因为压缩效率实在太高了。

传统的方式都是使用 Terser 这种 JS 开发的压缩器来实现，在 Webpack 或者 Rollup 中作为一个 Plugin 来完成代码打包后的压缩混淆的工作。但 Terser 其实很慢，主要有 2 个原因。

1. 压缩这项工作涉及大量 AST 操作，并且在传统的构建流程中，AST 在各个工具之间无法共享，比如 Terser 就无法与 Babel 共享同一个 AST，造成了很多重复解析的过程。
2. JS 本身属于解释性 + JIT（即时编译） 的语言，对于压缩这种 CPU 密集型的工作，其性能远远比不上 Golang 这种原生语言。

因此，Esbuild 这种从头到尾共享 AST 以及原生语言编写的 Minifier 在性能上能够甩开传统工具的好几十倍。

1. terser

vite默认使用的是esbuild压缩，如果要使用terser方式压缩，需要更改配置项

vite官网文档链接

 build: {
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
      minify: "terser",
 }

2. esbuild （推荐）

Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。

在这里可以看到目前主流压缩方式的对比情况。 压缩方式对比率

配置方法很简单，通过配置esbuild选项的drop属性

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

这边扔一下相关的vite文档和esbuild文档链接，具体内容可以看文档

vite文档esbuild配置说明

esbuild文档配置说明