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实现读取txt文档的脚本
Jul 20 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
js函数调用常用方法详解
Dec 03 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
微信小程序签到功能
2018/10/31 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python 切换root 执行命令的方法
2019/01/19 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
类的核心特性有哪些
2014/01/01 面试题
淘宝网店营销策划书
2014/01/11 职场文书
答谢会策划方案
2014/05/12 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技