js项目生产环境中移除 console

1、terser-webpack-plugin

webpack 构建的项目中安装使用

安装:
npm install terser-webpack-plugin --save-dev

配置

在webpack.config.js文件中

new TerserPlugin({
  terserOptions: {
    output: {
      comments: false, // 去除注释
    },
    warnings: false, // 去除黄色警告,
    compress: {
      drop_console: true,
      drop_debugger: true, // 特定情况需要利用debugger防止调试
      pure_funcs: ['console.log'], // 移除console.log 避免console.error
    },
  },
}),

2、

babel-plugin-transform-remove-console

安装
npm install babel-plugin-transform-remove-console --save-dev

在babel.config.js文件中加入配置

module.exports = {
  plugins: [
    'transform-remove-console',
  ],
};

如果只想在生产环境中使用,可以改成:

const prodPlugins = [];
if (process.en.NODE_ENV === 'production') {
	prodPlugins.push('transform-remove-console');
}
module.exports = {
  plugins: [
     ...prodPlugins
  ],
};
相关推荐
大数据追光猿6 分钟前
Python中的Flask深入认知&搭建前端页面?
前端·css·python·前端框架·flask·html5
莫忘初心丶8 分钟前
python flask 使用教程 快速搭建一个 Web 应用
前端·python·flask
横冲直撞de39 分钟前
前端接收后端19位数字参数,精度丢失的问题
前端
我是哈哈hh40 分钟前
【JavaScript进阶】作用域&解构&箭头函数
开发语言·前端·javascript·html
摸鱼大侠想挣钱41 分钟前
ActiveX控件
前端
谢尔登43 分钟前
Vue 和 React 响应式的区别
前端·vue.js·react.js
酷酷的阿云44 分钟前
Vue3性能优化必杀技:useDebounce+useThrottle+useLazyLoad深度剖析
前端·javascript·vue.js
神明木佑1 小时前
HTML 新手易犯的标签属性设置错误
前端·css·html
老友@1 小时前
OnlyOffice:前端编辑器与后端API实现高效办公
前端·后端·websocket·编辑器·onlyoffice
bin91531 小时前
DeepSeek 助力 Vue 开发:打造丝滑的缩略图列表(Thumbnail List)
前端·javascript·vue.js·ecmascript·deepseek