直接上教程=
1、安装 terser-webpack-plugin
npm install terser-webpack-plugin --save-dev
2、vue.config.js 中引入
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
//生产环境是不需要sourceMap的,如下配置可以去除
//问题: vue项目打包之后js文件夹中,会自动生成一些map文件,占用相当一部分空间
//sourceMap资源映射文件,存的是打包前后的代码位置,方便开发使用,这个占用相当一部分空间。
//map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错,有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
productionSourceMap:false,//清除sourceMap(可以减小一半大小如:压缩包7M,使用后3M多)
// 打包后禁止在控制台输出console.log
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] // 移除console
}
},
}),
)
}
},
}
记得重新执行:npm install
以上是"@vue/cli-service": “~5.0.0”,
老项目"@vue/cli-service": “~4.5.0”,需要换版本
安装
npm install -D terser-webpack-plugin@4.2.3
在webpack4 里边确实需要 配置这个 terser-webpack-plugin 插件,在 webpack5 中已经默认配置好了(具体可以去看文档),所以,期待脚手架配置 webpack5 上线。
又得饶头了,问题来了
我使用这个版本去做打包的时候,确实可以打包成功,但是打包的时候超级卡,超级慢,无奈,我换回了上一个插件,毕竟我的需求就是想要干掉 console 。
花了一个小时才找到解决方法:
new TerserPlugin({
cache: true,
sourceMap: false,
// 多进程
parallel: true,
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
},
},
}),