vue或react项目生产环境去掉console.log的操作


Posted in Javascript onSeptember 02, 2020

在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。

如果手动删除未免也太累了,再说以后想再开发还得重新写console。

事实上webpack提供了删除console的插件,在vue-cli3里面是这样用的:

首先安装terser-webpack-plugin

npm install terser-webpack-plugin -D

然后在vue.config.js文件里写插件的配置:

module.exports = {
 configureWebpack: (config)=>{
 if(process.env.NODE_ENV === 'production'){
  config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
 }
 }
}

2020.1.14补充:

上面的写法是直接修改webpack的配置,vue官方文档里说也可以返回一个将会被合并的对象,写法如下:

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
 configureWebpack: (config)=>{
 if(process.env.NODE_ENV === 'production'){
  // 返回一个将会被合并的对象
  return {
  optimization:{
  minimizer: [
 new TerserPlugin({
 sourceMap:false,
 terserOptions:{
  compress:{
  drop_console : true
  }
 }
 })
   ]
 }
 }
 }
 }
}

2020.4.22补充:

最近在做react项目的时候发现它的webpack的配置,也可以使用terser去掉console.log。

webpack.config.prod.js:

module.exports = {
 optimization:{
 minimizer: [
 new TerserPlugin({
  sourceMap:false,
 terserOptions:{
 compress:{
  drop_console : true
 }
 }
 })
 ]
 }
}

补充知识:vue中遇到数据更新但是页面没有更新的情况

今天在项目中遇到了一个需求,点击改变数据,之后在页面上立即看到更改后的数据。

vue或react项目生产环境去掉console.log的操作

首先,如上图的黄色按钮是通过v-for 循环产生的,data()里只有数据cards:[ … ],cards的值是通过调用后台接口拿到的。

data(){
 return {
 cards:[]
 }
}
<div v-for="card in cards" :key="card.id">
 <img src="xxx" />
 <div v-if="card.isShow" @click="cacelHandler(card)">
 <img src="xxxx" />
 </div>
</div>

这个头像下方的黄色按钮,是根据card.isShow的truthy 决定显示或不显示。

当我点击按钮的时候,把card.isShow 的值变为 false。

可是页面上的黄色按钮还在,并没有如我期望的那样消失。

通过查询资料得知,使用this.$forceUpdate()可以重新渲染组件,这样就可以得到想要的效果。

cacelHandler(card){
 card.isShow = false;
 this.$forceUpdate();
}

vue官方对$forceUpdate的解释是:

$forceUpdate可以迫使 Vue 实例重新渲染。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

以上这篇vue或react项目生产环境去掉console.log的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
js实现弹幕墙效果
Dec 10 Javascript
JS继承实现方法及优缺点详解
Sep 02 #Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 #Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 #Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 #Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 #Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 #Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 #Javascript
You might like
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
详解PHP数组赋值方法
2015/11/07 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
Python中实现输入一个整数的案例
2020/05/03 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
python怎么调用自己的函数
2020/07/01 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
智能钱包:Ekster
2019/11/21 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
公司委托书范本
2014/04/04 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
劳模先进事迹材料
2014/12/24 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
恰同学少年观后感
2015/06/08 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
父亲节感言
2015/08/03 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
Python实现滑雪小游戏
2021/09/25 Python
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python