Vue Cli3 打包配置并自动忽略console.log语句的方法

所属分类: JavaScript / 网络编程 阅读数: 1033
收藏 0 赞 0 分享

下载插件

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']
更多精彩内容其他人还在看

阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

cancelBubble在IE下有效 stopPropagation在Firefox下有效 复制代码 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi... 查看详情
收藏 0 赞 0 分享

匹配html标记的正则

'>" name= spanName /> 匹配 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]... 查看详情
收藏 0 赞 0 分享

图片向上滚动

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]... 查看详情
收藏 0 赞 0 分享

常用参考资料(手册)下载或者链接

下面是一些常用参考资料(手册)下载或者链接:--中文手册系列(经典产品)-------------------------------------------------W3schools HTML教程 CHM帮助(桃花岛主)http://www.blueidea.com/art... 查看详情
收藏 0 赞 0 分享

測試代碼真方便

測試代碼真方便 Powered by Poorfish Blueidea.com [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能... 查看详情
收藏 0 赞 0 分享

Div+CSS+JS树型菜单,可刷新

搞了一个DIV+CSS菜单,兼容Firefox,分享给大家,大家一齐学习 Div+CSS+JS树型菜单,可刷新 我的网站 [url]www.netany.net[/url] [url]www.netany.net[/url] ... 查看详情
收藏 0 赞 0 分享

CSS+JS构建的图片查看器

这是一个使用 CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE、Firefox 、Opera。JS部分function showPic (whichpic... 查看详情
收藏 0 赞 0 分享

如何实现iframe(嵌入式帧)的自适应高度

好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。... 查看详情
收藏 0 赞 0 分享

自适应图片大小的弹出窗口

很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。   实现此功能的最简单作法是用以下HTML代码创建一个图像链接:   <a href="fullsize.jpg" targ... 查看详情
收藏 0 赞 0 分享

颜色渐变效果

javascriptboy // Flash table Extension for Dreamwever ,by dio(diopex@sina.com)nereidFadeObjects = new Object();nereidFadeTimers = new Object... 查看详情
收藏 0 赞 0 分享
查看更多