vueCli4配置config.optimization.minimizer(‘terser‘),去掉console.log、debugger、注释

本文介绍如何使用Vue CLI 4通过config.optimization.minimizer('terser')配置来优化生产环境,包括去除console.log、debugger及注释,以减小打包体积并提升性能。

vueCli4配置config.optimization.minimizer(‘terser’),生产环境去掉console.log、debugger、注释

具体配置文档可查看 https://cli.vuejs.org/migrating-from-v3/#vue-cli-service


```javascript
const devFlag = process.env.NODE_ENV === 'development'
chainWebpack: config => {
        config.when(!devFlag, config => {
            config.optimization.minimizer('terser').tap((args) => {
                // 注释console.*
                args[0].terserOptions.compress.drop_console = true
                // remove debugger
                args[0].terserOptions.compress.drop_debugger = true
                // 移除 console.log
                args[0].terserOptions.compress.pure_funcs = ['console.log']
                // 去掉注释 如果需要看chunk-vendors公共部分插件,可以注释掉就可以看到注释了
                args[0].terserOptions.output = {
                    comments: false
                };
               return args
            })
       })
}

配置成功后,vue inspect --mode=production > output.js 项目根目录输入命令,生成生产环境的配置 看看是否配置成功,出现配置的字段说明配置成功

出现配置的字段说明配置成功

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值