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 相关文章推荐
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 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常用字符串的总结(待续)
2013/06/07 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python API自动化框架总结
2019/11/12 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
英文简历自荐信范文
2013/12/11 职场文书
毕业留言寄语大全
2014/04/10 职场文书
七夕情人节促销方案
2014/06/07 职场文书
2014年副班长工作总结
2014/12/10 职场文书
先进班集体事迹材料
2014/12/25 职场文书
期末个人总结范文
2015/02/13 职场文书
七一表彰大会简报
2015/07/20 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers