在 Vite 中,你可以通过使用 Rollup 插件来自动去除 console.log
语句。一个常用的插件是 rollup-plugin-terser
,它能够压缩和优化代码,包括去除调试语句。
以下是如何在 Vite 中配置该插件的步骤:
-
安装插件:
首先,你需要安装
terser
和rollup-plugin-terser
:npm install terser rollup-plugin-terser --save-dev
-
配置 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 }, }), ], }, }, });
-
构建项目:
现在,当你运行构建命令(例如
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(); // 以模块名命名
}
}
}
}
}
前端工程师、程序员
标签:
vite
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~