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 相关文章推荐
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
UI Events 用户界面事件
Jun 27 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP 透明水印生成代码
2012/08/27 PHP
destoon官方标签大全
2014/06/20 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
python字典排序实例详解
2015/05/20 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python套接字流重定向实例汇总
2016/03/03 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python利用有道翻译实现"语言翻译器"的功能实例
2017/11/14 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python 如何区分return和yield
2020/09/22 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
嘉宾邀请函
2015/01/31 职场文书
小孩不笨观后感
2015/06/03 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript