vite项目当中如何移除项目中的console和其他生产日志

注：vite2.6.x需要配置 “build.minify” 为 “terser”

在vue-cli中移除console，是要下载babel-plugin-transform-remove-console插件。
但是在vite中已经内置了移除console的设置了，只需要配置一下就行了。

//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,
            },
        },
    },
})

而如果使用esbuild来构建去掉console和debugger，会使用如下方法：

 ...
build: {
      minify: 'esbuild',
      sourcemap: boo,
      chunkSizeWarningLimit: 1500,
      esbuild: {
        drop: mode === 'production' ? ['console', 'debugger'] : []
      },
      rollupOptions: {
        output: {
          chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId
              ? chunkInfo.facadeModuleId.split('/')
              : [];
            const fileName =
              facadeModuleId[facadeModuleId.length - 2] || '[name]';
            return `js/${fileName}/[name].[hash].js`;
          }
        }
      }
    },
    esbuild: {
      drop: mode === 'production' ? ['console', 'debugger'] : []
    },
...

除此以外，还可以用vite-plugin-remove-console这个插件进行去除：

• vite.config.ts

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()
  ]
});