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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
vue-hook-form使用详解
Apr 07 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python机器学习实战之树回归详解
2017/12/20 Python
scrapy爬虫完整实例
2018/01/25 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python绘制雷达图实例讲解
2021/01/03 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
运动会广播稿30字
2014/01/21 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers