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 TextArea动态显示剩余字符
Oct 22 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
js实现随机点名器精简版
Jun 29 Javascript
如何在JS文件中获取Vue组件
Sep 16 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的socket编程详解
2016/11/20 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
原生js轮播特效
2017/05/18 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python 实现图片裁剪小工具
2021/02/02 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
煤矿机修工岗位职责
2014/02/07 职场文书
小学课外活动总结
2014/07/09 职场文书
初中优秀学生评语
2014/12/29 职场文书
电气工程师岗位职责
2015/02/12 职场文书
公司行政管理制度范本
2015/08/05 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
Java异常处理try catch的基本用法
2021/12/06 Java/Android