如何移除项目中无用的 console.log 代码

大家好,我是若川。早些天时,我看到一个后端公众号发《辞退了一个前端》,当时还想着现在后端公众号都开始吊打前端了嘛。其中有个理由就是线上还一堆console.log...我猜很多人都会移除项目中无用的console.log。可以复习一下。


前言

说起console.log调试,不用多说,那是非常的好用,开发中帮助我们解决了不少Bug。我们经常能在开发环境中看见这一坨一坨的console调试。但是生产环境是绝不对不允许出现console信息代码的。你还在手动一个一个删除吗,那得多累啊!

下面我们来看一下这几种方式清除生产环境console无用代码。

基本操作

Webpack配置

uglifyjs-webpack-plugin

uglifyjs-webpack-plugin

我们可以看一下该插件介绍,该插件是用于减少我们代码js代码体积。并且如果安装运行该插件的话,node版本是在v6.9.0+Webpack版本v4.0.0+

官网地址看这里:uglifyjs-webpack-plugin

安装

npm i uglifyjs-webpack-plugin

使用

webpack.config.js文件下进行如下配置。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {// 省略...mode: "production",optimization: {minimizer: [new UglifyJsPlugin({uglifyOptions: {// 删除注释output:{comments: false},compress: {drop_console: true, // 删除所有调式带有console的drop_debugger: true,pure_funcs: ['console.log'] // 删除console.log}}})]} 
}

配置完上面代码,重启即可看到效果。注意:代码只会在production(生产环境)环境下有效,看上面我们的配置mode: production,就是生产环境。来讲解一下上面这俩个属性drop_consolepure_funcs的区别,前者则是删除所有带console的前缀的调试方法,如:console.logconsole.tableconsole.dir只要带有console前缀则全部删除。而后者则是配置,就是数组的值是什么它才会删除什么,比如pure_funcs:[console.log, console.dir]那么只会删除这两项,则不会删除代码中的console.table代码。

以上代码放到生产环境下,console调试代码即可清除,但是还有一个问题需要注意,就是该插件只支持ES5语法,如果你的代码中涉及到ES6语法则会报错。

terser-webpack-plugin

terser-webpack-plugin

该插件跟上面uglifyjs-webpack-plugin一样,都是用于减少我们代码js代码体积。

看上面描述:如果你的Webpack版本大于5+,则不需要安装此terser-webpack-plugin插件,会自带terser-webpack-plugin。但你的Webpack版本还是4,则你需要安装terser-webpack-plugin4的版本

安装

npm i terser-webpack-plugin@4

使用

const TerserWebpackPlugin = require("terser-webpack-plugin");module.exports = {// 省略...mode: "production",optimization: {minimizer: [new TerserWebpackPlugin({terserOptions: {compress: {warnings: true,drop_console: true,drop_debugger: true,pure_funcs: ['console.log', "console.table"] // 删除console}}});]}
}

该插件功能与上面一样,属性用法也一样,唯一该插件可支持ES6语法。都是在生产环境代码生效。

Vue-cli配置

这是在Vue-cli项目中推荐使用的清除console插件。更多介绍看这里 babel-plugin-transform-remove-console

安装

npm i babel-plugin-transform-remove-console --save-dev

使用

在项目根目录babel.config.js文件下配置。该插件不区分生产环境或者开发环境,只要你配置都能生效。

module.exports = {plugins: ["transform-remove-console"]
}// 生产环境如下配置const prodPlugins = []
if (process.env.NODE_ENV === 'production') {prodPlugins.push('transform-remove-console')
}
module.exports = {plugins: [...prodPlugins]
}

简单粗暴删除

接下来这个可是一个骚操作,瞪大眼睛看好了,哈哈哈。直接重写console.log的方法。

console.log = function () {};

灵活运用VScode编辑器

微信截图_20210805001715.png

使用

直接全局搜索本项目里console.log正则匹配,然后全部替换为空即可。

console\.log\(.*?\)

手写Loader删除console

我们来写一个简易版的清除console插件。

新建一个js文件,我这里名为clearConsole.js,其实这里也是用正则去匹配然后替换为空。如果不懂loader则可看我这篇文章手写一个Sass-loader。

clearConsole.js

const reg = /(console.log\()(.*)(\))/g;
module.exports = function(source) {source = source.replace(reg, "")return source;
}

Vue.config.js配置

module.exports = {// 省略...configureWebpack: {module: {rules: [{test: /\.vue$/,exclude: /node_modules/,loader: path.resolve(__dirname, "./clearConsole.js")},{test: /\.js$/,exclude: /node_modules/,loader: path.resolve(__dirname, "./clearConsole.js")}],}},
}

配置如上代码就可以啦~,清除js文件和vue文件里的console.logexclude代表不去node_module目录下查找。

最近组建了一个湖南人的前端交流群,如果你是湖南人可以加我微信 ruochuan12 私信 湖南 拉你进群。


推荐阅读

我在阿里招前端,该怎么帮你(可进面试群)
我读源码的经历

面对 this 指向丢失,尤雨溪在 Vuex 源码中是怎么处理的
老姚浅谈:怎么学JavaScript?

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经写了7篇,点击查看年度总结。
同时,活跃在知乎@若川,掘金@若川。致力于分享前端开发经验,愿景:帮助5年内前端人走向前列。

识别方二维码加我微信、拉你进源码共读

今日话题

略。欢迎分享、收藏、点赞、在看我的公众号文章~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275575.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WCF - 服务实例管理模式

WCF 提供了三种实例上下文模式:PreCall、PreSession 以及 Single。开发人员通过 ServiceBehavior.InstanceContextMode 就可以很容易地控制服务对象的实例管理模式。而当 WCF 释放服务对象时,会检查该对象是否实现了 IDisposable 接口,并调用…

oracle io lost,磁盘IO故障

测试工作正在如火如荼的进行,突然数据库就连接不上了。我连接上主机发现数据库alert_sid日志中有如下信息:KCF: write/open error block0x9a6 online1file2 /oracle_data1/UNDOTBS3.dbferror27072 txt: Linux Error: 5: Input/output errorAdditional in…

易思汇完成近亿元B轮融资,信中利投资

3月19日消息,近日,留学生在线付费平台易思汇宣布已在3月份完成由信中利投资的近亿元B轮融资。 易思汇联合创始人高宇同表示,本轮融资将主要用于留学生信用卡、留学家庭金融商城等新产品布局,以及扩大团队和市场投入。 易思汇成立…

远程连接 错误 内部错误_关于错误的性质和原因。 了解错误因素

远程连接 错误 内部错误Back in 2012, I was a young[er] product designer working in a small tech agency in Valencia, Spain. In parallel, I worked as a freelancer on several side projects for different clients. One day I was contacted by a new health services…

得到鹅厂最新前端开发手册一份

又逢金九银十,拿到大厂offer一直是程序员朋友的目标,但是去大厂就得拿出实力来。除了需要积累技术,了解并掌握面试的技巧,熟悉大厂面试流程,也必不可少。这里分享一份最新入职腾讯的前端社招面经,来看看鹅厂…

性能测试分析之带宽瓶颈的疑惑

第一部分, 测试执行 先看一图,再看下文 这个当然就是压力过程中带宽的使用率了,我们的带宽是1Gbps的,合计传输速率为128MB/s,也正因为这个就让我越来越疑惑了,不过通过压力过程中的各项数据我又不得不相信。…

Android 中的LayoutInflater的理解

LayoutInflater与findViewById的区别? 对于一个已经载入的界面,就可以使用findViewById()方法来获得其中的界面元素。对于一个没有被载入或者想要动态载入的界面,就需要使用LayoutInflater对象的inflate()方法来载入。findViewById()是查找已…

linux rootfs编译进内核,九鼎x6818开发板笔记:uboot、kernel、rootfs编译和烧写

下面记录了如何搭建嵌入开发环境,如何编译uboot、kernel、和文件系统,如何烧写镜像以及如何配置uboot环境变量。阅读注意:记录中(Base框中的内容)一些操作故意被添加,为了展示文件内容,故意调用cat(Ubuntu)或者type(wi…

figma下载_素描vs Figma困境

figma下载I distinctly remember how much hatred I had in my heart when I lived through my first UI update. The year was 2009; I had just gotten my braces off and I was ready to smash that ‘Like’ button on my high school crush’s status when I logged into …

祝大家七夕快乐,邀你源码共读,顺带发点红包

大家好,我是若川。这是一个普通的周六。只不过又叫七夕节,祝大家七夕节快乐~所以就不更新技术文了。估计还是有很多读者不知道我。若川名字由来是取自:上善若水,海纳百川。顺便放两篇文章。我读源码的经历,跟各位读者朋…

windows 系统监视器 以及建议阀值

windows 系统监视器 以及建议阀值 计数器的说明可以在添加计数器那边 资源 对象\计数器建议的阈值注释磁盘Physical Disk\% Free SpaceLogical Disk\% Free Space15%磁盘Physical Disk\% Disk Time Logical Disk\% Disk Time90%磁盘Physical Disk\Disk Reads/sec、Physical Dis…

前端人员如何在linux服务器上搭建npm私有库

为什么要搭建npm私有库? 为了方便下载时,公共包走npmjs,私有包走内部服务器。npm包下载的速度较慢,搭建npm私有库之后,会先操作私有库中是否有缓存,有缓存直接走缓存,而不用重新再去请求一遍网络。哪种方式…

硬币 假硬币 天平_小东西叫硬币

硬币 假硬币 天平During the last 1,5 years, I’ve been traveling a lot. Apart from my must-have things like laptop, sketchbook, and power bank, there constantly appears a new one, in a familiar shape but a new look. That’s 在过去的1.5年中,我经常…

Linux创建一个用户时分配组,useradd和groupadd(Linux创建用户\用户组\设置\分配用户权限)的使用...

前言:man useradd    man groupadd    info useradd    info groupadd 都可以获取相关命令的用法信息。个人比较喜欢读英文解释文档,没有你想象的那么complicated!😜USERADD(8) System Management Commands USERADD…

尤雨溪发布的Vue 3.2 有哪些新变化?

大家好,我是若川。今天分享一篇 Vue 3.2 版本的文章。查看源码等系列文章。学习源码整体架构系列、年度总结、JS基础系列1前言8.10号凌晨,尤雨溪在微博平台官宣 Vue 3.2 版本正式发布:此版本包含一系列重要的新功能与性能改进,但并…

对象的清除

调用System.gc() 请求垃圾回收的最简单的方法,但是注意——只是请求,在调用System.gc()之后,有可能会释放出更多的内存空间。转载于:https://www.cnblogs.com/happykakeru/archive/2011/04/09/2010030.html

https://zeplin.io/ 设计图标注及切图

2019独角兽企业重金招聘Python工程师标准>>> https://zeplin.io/ 转载于:https://my.oschina.net/soho00147/blog/3025646

更好的设计接口_设计可以而且必须做得更好

更好的设计接口We live in a world that becomes more dependent on technology every day. Tech gives us new ways to communicate, learn, work, and play, and recently it enabled us to reveal the appalling police brutality towards black people in the US by sharin…

linux隐写文件剥离,杂项的基本解题思路(1)——文件操作隐写、图片隐写

文件操作隐写图片隐写压缩文件处理流量取证技术文章本来是分成4部分的,但是前两部分何在一起写了也就没有分开,所以干脆就只分了两部分文件基本类型的识别一、kail 下file 文件名原理就是识别文件文件头比如这个软件:二、WinHex通过winhex分析…

账务管理系统

2011-04-11 21:55最近写了一个账务管理系统(个人版)使用C#语言编写,编译器VS2010,数据库Access2010,系统采用三层架构,界面可以换肤, 窗体按钮可以移动,可以自定义皮肤,保…