Vue Cli3 打包配置并自动忽略console.log语句的方法


Posted in Javascript onApril 23, 2020

下载插件

npm i -D uglifyjs-webpack-plugin

在 vue.config.js 引入使用

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
 configureWebpack: {
  plugins: [
   new UglifyJsPlugin({
    uglifyOptions: {
     compress: {
      drop_console: true,
     },
    },
   }),
  ],
 },
 devServer: {
  proxy: {
   '/xxx': {
    target: 'http://192.168.150.17:8080/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/xxx': 'xxx',
    },
   },
  },
 },
 publicPath: './',
}

这时执行 npm run build 打包后的文件就没有 console.log 语句了。

不过这时会有一个问题,就是在开发环境的时候编译会非常慢。例如修改了一个变量的值,我的电脑要编译 10 秒才能重新刷出来页面,一直卡在 92% chunk asset optimization

由于去掉 console.log 语句这个功能只有在打包时才需要,所以我们可以加一个判断,只在生产环境时才把上述配置代码加上。

所以正确的配置如下:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const config = {
 devServer: {
  proxy: {
   '/xxx': {
    target: 'http://192.168.150.17:8080/',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
     '^/xxx': 'xxx',
    },
   },
  },
 },
 publicPath: './',
}

if (process.env.NODE_ENV === 'production') {
 config.configureWebpack = {
  plugins: [
   new UglifyJsPlugin({
    uglifyOptions: {
     compress: {
      drop_console: true,
     },
    },
   }),
  ],
 }
}

module.exports = config

vue-cli3.0 生产包去除console.log

不安装插件去除console.log的方法

vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化,具体配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到。

这里使用了环境变量进行控制,只有打生产包的时候才会调用这个插件进行打包优化。

terser-webpack-plugin的具体配置在同一个文件夹下terserOptions.js中,只要在这个文件中compress对象中加入以下几个属性就可以了

warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']

到此这篇关于Vue Cli3 打包配置并自动忽略console.log语句的方法的文章就介绍到这了,更多相关Vue Cli3打包并忽略console.log内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
手机端转换rem适应
Apr 01 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 #Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 #Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 #Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 #Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 #Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 #Javascript
微信小程序实现手指拖动选项排序
Apr 22 #Javascript
You might like
社区(php&&mysql)五
2006/10/09 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
linux iconv方法的使用
2011/10/01 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php新建文件的方法实例
2019/09/26 PHP
javascript 继承实现方法
2009/08/26 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python json格式化打印实现过程解析
2020/07/21 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
2014学雷锋活动总结
2014/03/09 职场文书
个人委托书范本
2014/04/02 职场文书
酒店宣传语大全
2015/07/13 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
2019银行竞聘书
2019/06/21 职场文书
Python 内置函数速查表一览
2021/06/02 Python
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
JS封装cavans多种滤镜组件
2022/02/15 Javascript
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis