背景
在开发阶段的时候我们会经常在前端项目里面使用console.log来输出、调试代码,当要将这个项目部署到服务器时,首先我们不想把这些信息暴露给用户,其次这些console.log函数会一定程度上影响代码的执行效率。所以我们在打包发布部署时,需要将这些console.log语句给屏蔽掉。
实现
//1、引入插件(该插件在vue-cli3的时候就已经集成了,我们不需要自己执行npm去install)
const TerserPlugin = require('terser-webpack-plugin')
//2、配置到configureWebpack中(vue.config.js文件)
configureWebpack: (config) => {
let optimization = {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] // 移除console
}
},
})
]
}
}