Vite项目构建优化之移除console.log和其他生产日志
# 方案一
vite 3.x
已经将 esbuild
作为默认构建选项,你可以通过如下配置在构建时移除代码中的 console.log
、debugger
。
//vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build:{
minify: 'esbuild', // 默认
},
esbuild: {
drop: ['console', 'debugger'],
},
});
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 方案二
vite2.6.x
中已经集成了去除console
和debugger
的功能, 但没有terser
插件,想要去除console
和debugger
, 必须先安装terser
插件:
npm install -D terser
1
//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
minify: 'terser',
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 方案三
使用 vite-plugin-remove-console
插件,如果有log需求的话,使用这个最好,可以支持那些页面无需剔除日志。
npm install vite-plugin-remove-console -D
1
使用方法
//vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import removeConsole from "vite-plugin-remove-console";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), removeConsole()]
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 总结
esbuild
:如果你并没有什么硬性需求,就是为了生产环境不要日志,其实使用官方的配置即可tester
:如果是项目中硬性要求必须使用tester
,那么使用他的相关方法是可以,否则不推荐vite-plugin-remove-console
:如果项目中有些页面或者组件需要必须显示log日志,可高度配置,该插件其实还是可以的
注意:
Esbuild,它比 terser 快 20-40 倍,压缩率只差 1%-2%。
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13