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 相关文章推荐
一段多浏览器的"复制到剪贴板"javascript代码
Mar 27 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 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常用字符串的总结(待续)
2013/06/07 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Python读写Excel文件的实例
2013/11/01 Python
python三元运算符实现方法
2013/12/17 Python
Python装饰器的函数式编程详解
2015/02/27 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
会计电算化应届生自荐信
2014/02/25 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
班风口号
2014/06/18 职场文书
生产操作工岗位职责
2014/09/16 职场文书
好好学习保证书
2015/02/26 职场文书
怎么用Python识别手势数字
2021/06/07 Python
Python之matplotlib绘制饼图
2022/04/13 Python