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实现的Select级联
Jan 27 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
小程序实现列表展开收起效果
Jul 29 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
拥抱模块化的JavaScript
2012/03/07 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python去除扩展名的实例讲解
2018/04/23 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python如何操作docker redis过程解析
2020/08/10 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
SQL数据库笔试题
2016/03/08 面试题
小学教师岗位职责
2013/11/25 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
公司领导班子对照材料
2014/08/18 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android