uniapp 微信小程序 vue 生产环境去除console.log 日志

第六篇博客

uniapp 微信小程序 生产环境去除console.log日志

Created by @一个前端er 2020/05/12

前端菜鸟一枚，欢迎各位大佬对本博文批评指正

这段时间在忙毕业设计，用uniapp开发一个微信小程序，开发软件用的是hbuilderx，因为它就是为uniapp和vue开发而生的，虽然体验远不如vscode，但是还算凑合，我用的是uniapp 生成的项目模板，没有使用yarn 或者 npm来初始化项目，所以基本上不用自己配置webpack。

这就带来一个问题了，我们在开发环境下总是有很多日志要打印出来看一下，基本上每个前端开发都会用到 console.log 查看变量信息，进行开发调试。其实在生产环境之中这些log是没有用处的，反而还会拖慢运行时的速度，而此时我又不想去动用webpack，那怎么办呢？

其实很简单，只要判断当前是生产环境还是开发环境，然后在生产环境做一下配置就好了，console其实是全局对象window（node中是global）的一个属性，console 本身就是也是一个对象，内置很多函数对象，比如说log,info,warn...等。

直接在main.js中引入以下代码

//...
if (uni.getSystemInfoSync().platform !== "devtools") {
     
	console.log = () => {
     }
}

/*
const app = new Vue({
	store,
	...App
})
app.$mount()
*/

判断当前是否是运行在开发者工具中，如果不是，则让log变成一个空函数。这样log就不会打印出内容了，基本上没有什么耗时操作，请看以下对比图：

可以看到当log是空函数之后，它的执行时间基本上接近于0.005ms，这点时间耗费，就算项目中有1000个console.log，也就会耗费5ms左右的时间，而如果不做优化的话，随着你打印信息的长度越长，耗费的时间也会越长，可以说是一个大幅度的优化了，虽然人眼察觉不到什么，但是对于有一点代码洁癖的人来说，还是有点用的，当然，此方法也可以用在web开发或者混合开发上，一方面提升了运行效率，另一方面也可以避免一些信息在控制台的泄露，显得你很业余。

当然，你也可以在打包的时候之间让log变成空函数，这样就省去环境判断了。

我是@一个前端er，下篇博客见