joken-前端工程师

  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::

在 Vite 中,你可以通过使用 Rollup 插件来自动去除 console.log 语句。一个常用的插件是 rollup-plugin-terser,它能够压缩和优化代码,包括去除调试语句。

以下是如何在 Vite 中配置该插件的步骤:

  1. 安装插件

    首先,你需要安装 terserrollup-plugin-terser

    npm install terser rollup-plugin-terser --save-dev
    
  2. 配置 Vite

    vite.config.js 中引入并使用该插件:

    import { defineConfig } from 'vite';
    import { terser } from 'rollup-plugin-terser';
    
    export default defineConfig({
      build: {
        rollupOptions: {
          plugins: [
            terser({
              compress: {
                drop_console: true, // 去除 console.log
              },
            }),
          ],
        },
      },
    });
    
  3. 构建项目

    现在,当你运行构建命令(例如 vite build)时,所有的 console.log 语句将被自动去除。

注意事项

  • 这种配置只在生产模式下生效,因此在开发模式下不会去除 console.log,以便于调试。
  • 确保你在生产环境中使用该配置,以避免在最终用户的浏览器中留下调试信息。
build: {
        rollupOptions: {
            plugins: [
                terser({
                    compress: {
                        drop_console: true // 去除 console.log
                    }
                })
            ],
            output: {
				//拆分太大的包配置
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        return id.split('node_modules/')[1].split('/')[0].toString(); // 以模块名命名
                    }
                }
            }
        }
    }
posted on 2024-10-14 21:58  joken1310  阅读(197)  评论(0编辑  收藏  举报