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 prototype属性使用说明
May 13 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
JS中一些高效的魔法运算符总结
May 06 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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
substr()函数中文版
2006/10/09 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
php错误日志简单配置方法
2016/07/11 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
2019年Java 最常见的 面试题
2016/10/19 面试题
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书