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

# 方案二

vite2.6.x中已经集成了去除console和debugger的功能, 但没有terser插件,想要去除console和debugger, 必须先安装terser插件:

npm install -D terser

//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

# 方案三

使用 vite-plugin-remove-console 插件，如果有log需求的话，使用这个最好，可以支持那些页面无需剔除日志。

npm install vite-plugin-remove-console -D

使用方法

//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

# 总结

esbuild：如果你并没有什么硬性需求，就是为了生产环境不要日志，其实使用官方的配置即可
tester：如果是项目中硬性要求必须使用tester，那么使用他的相关方法是可以，否则不推荐
vite-plugin-remove-console：如果项目中有些页面或者组件需要必须显示log日志，可高度配置，该插件其实还是可以的

注意：

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

#Vite #Vue

上次更新: 2024/01/30, 00:35:17

← Vite2 + Vue3添加svg的使用并通过svg实现自定义Icon组件 vsCode 之 Monaco Editor 在 vue-cli3.0 中的使用方法→