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 相关文章推荐
农历与西历对照
Sep 06 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
详解Angular路由之路由守卫
May 10 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
js Calender控件使用详解
2015/01/05 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
python调用shell的方法
2013/11/20 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
建龙钢铁面试总结
2014/04/15 面试题
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
出售房屋协议书范本
2014/10/06 职场文书
大学生在校表现评语
2014/12/31 职场文书
刮痧观后感
2015/06/05 职场文书
MySQL分库分表详情
2021/09/25 MySQL
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL