Vue Cli 3 打包配置--自动忽略 console.log 语句
时间:2022-07-26
本文章向大家介绍Vue Cli 3 打包配置--自动忽略 console.log 语句,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
下载插件
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
2020.8.5 更新
使用上述方法有个缺陷,就是每次打包的时间太长。现在我已经弃用这种方法了,改成重写 console.log()
函数,效果更好,具体代码如下:
export function rewirteLog() {
console.log = (function (log) {
return process.env.NODE_ENV == 'development'? log : function() {}
}(console.log))
}
在 main.js
引入这个函数并执行一次,就可以实现原来的效果了。
参考资料
- Extjs form 组件
- Extjs grid 组件
- WordPress 网站开发“微信小程序”实战(三)
- Extjs mvc
- Extjs 数据代理
- WordPress 网站开发“微信小程序”实战(四)
- 详解零知识证明的四大基础技术,如何与以太坊发生反应
- 入门:添加一个支持获取单一资源以及支持POST,PUT和DELETE方法
- html5语义化标签——回顾
- flex布局——回顾
- WordPress 网站开发“微信小程序”实战(五)
- Windows Runtime(WinRT) 揭秘
- WeApp-Workflow: 基于Gulp 的微信小程序前端开发工作流
- 如何安装Windows Phone SDK 7.1 Release Candidate (RC)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法