Vue3 Vite 生产环境如何移除项目中的console + 其他生产日志 + sourcemap

Vite：下一代的前端工具链。

目录

一、介绍

1、官方文档：Vite | 下一代的前端工具链

2、配置：构建选项 | Vite 官方中文文档

二、使用方法

1、esbuild（推荐）

2、terser

tips

---

一、介绍

1、官方文档：Vite | 下一代的前端工具链

Vite | 下一代的前端工具链下一代前端工具链https://cn.vitejs.dev/

2、配置：构建选项 | Vite 官方中文文档

构建选项 | Vite 官方中文文档下一代前端工具链https://cn.vitejs.dev/config/build-options.html

二、使用方法

vite.config.ts

1、esbuild（推荐）

{
    server: {
      ...
    },
    esbuild: {
      drop: mode === 'production' ? ['console', 'debugger'] : []
    },
    build: {
      minify: 'esbuild',
      sourcemap: false, // 是否生成sourcemap
    },
}

注：vite默认使用的是esbuild压缩，esbuild比 terser 快 20-40 倍，压缩率只差 1%-2%。

2、terser

{
    server: {
      ...
    },
    build: {
      minify: 'terser',
      terserOptions: { 
        compress: {
          keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
          // 删除生产环境中的console和其他生产日志
          drop_console: true,
          drop_debugger: true,
        },
      },
      sourcemap: false, // 是否生成sourcemap
    },
}

tips

1、build.minify#

• 类型： boolean | 'terser' | 'esbuild'
• 默认： 'esbuild'

设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。Benchmarks

注意，在 lib 模式下使用 'es' 时，build.minify 选项不会缩减空格，因为会移除掉 pure 标注，导致破坏 tree-shaking。

当设置为 'terser' 时必须先安装 Terser。

npm add -D terser

构建选项 | Vite 官方中文文档

2、drop_console 选项默认为 false，需要手动设置为 true 才能去除 console。

3、去除console.log并且可以保留console.error

esbuild: {
  drop: ['debugger'],
  pure: ['console.log'],
},

参考：

https://juejin.cn/post/7122000161902952478
 

 欢迎扫码下方二维码关注VX公众号