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#

设置为 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公众号