小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
前言
佛祖保佑， 永无bug。Hello 大家好！我是海的对岸！
我们项目做得熟练了，Vue也用的熟悉了，我们就会想着扩展。性能优化就是一个不错的方向
这次我们讨论下console.log和debugger
console.log和 debugger
这两玩意，大家都熟悉，项目在开发的时候，我们需要时常调试代码，调样式，调接口，调业务功能，
开发时期，这两哥们功不可没。
随着项目开发完成，步入稳步运行的阶段，就是部署到生产环境。这个时候，我们就不需要再进行调试什么的了，那么我们需要移除掉console.log和debugger
怎么移除
手动一个个的删掉？注释掉？
开玩笑，小项目还可以这样删，注释。 大项目怎么办？那不得把人累死？
uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin --save-dev
或
yarn add uglifyjs-webpack-plugin -D
在项目根目录下创建vue.config.js:
首先 头部引入
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
或
const TerserPlugin = require('terser-webpack-plugin');
解释下为什么引入terser-webpack-plugin的时候不要安装terser-webpack-plugin？
你本地的Webpack版本大于5+，则不需要安装此terser-webpack-plugin插件，会自带terser-webpack-plugin。但你的Webpack版本还是4，则你需要安装terser-webpack-plugin4的版本
npm install terser-webpack-plugin@4 --save-dev
或
yarn add terser-webpack-plugin@4 -D
接着 module.exports 中的 configureWebpack部分 下的optimization模块内引入
// 以下2中方式均可
// 1. webpack版本大于5+， 或者 你 进行 yarn add terser-webpack-plugin@4 -D 操作了
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'] // 移除console
}
},
}),
]
// 或
// 2. 你头部引入的是 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
// 删除注释
output:{
comments: false
},
compress: {
drop_console: true, // 删除所有调式带有console的
drop_debugger: true,
pure_funcs: ['console.log'] // 删除console.log
}\
}\
})\
]
来讲解一下上面这俩个属性
drop_console删除所有带console的前缀的调试方法，如：console.log、console.table、console.dir只要带有console前缀则全部删除。pure_funcs配置作用，就是数组的值是什么它才会删除什么，比如pure_funcs：[console.log, console.dir]那么只会删除这两项，则不会删除代码中的console.table代码。
drop_console 默认为 false（不清除console语句），drop_debugger 默认为 true（清除 debugger 语句）
全部代码如下:
const path = require("path");
const TerserPlugin = require('terser-webpack-plugin');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
// 打包后运行环境目录
publicPath: process.env.NODE_ENV === "production" ? "/projectName/" : "/",
lintOnSave: true, // eslint-loader 是否在保存的时候检查
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
filenameHashing: true, // 文件hash
devServer: {
// port: 3306,
open: true,
proxy: {
"/api": {
// target: http://xxx.xxx.xx.xxx:xxxx/api/", // [开发服务器接口]
// target: "http://xxx.xxx.xx.xxx:xxxx/api/", // [测试服务器接口]
target: "http://xxx.xxx.xx.xxx:xxxx/api/", // [正式服务器接口]
ws: true,
changeOrigin: true,
pathRewrite: {
"^/api": "/" //路径转发代理
}
},
"/LocalDemoApi": {
target: "http://localhost:8080", //路径指向本地主机地址及端口号
ws: true,
changeOrigin: true,
pathRewrite: {
"^/LocalDemoApi": "/DemoData" //路径转发代理
}
},
}
},
/*
配置vue-cli3项目，可以说是all in vue.config.js的。
当然，封装、就一定会留个口给用户，去对底层进行自定义操作。
vue.config.js的配置项中，有两个口，configureWebpack和chainWebpack。
configureWebpack:
是调整webpack配置最简单的一种方式，可以新增也可以覆盖cli中的配置。
可以是一个对象：被 webpack-merge 合并到webpack 的设置中去
也可以是一个函数：如果你需要基于环境有条件地配置行为，就可以进行一些逻辑处理，可以直接修改或
新增配置，(该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。
在函数内，你可以直接修改配置，或者返回一个将会被合并的对象。
chainWebpack:
这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则
和具名插件，可以通过其提供的一些方法链式调用，在cli-service中就使用了这个插件
*/
configureWebpack: {
optimization: {
// 此处添加 移除console.log 和 debugger的代码
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true, // 清除 console 语句
drop_debugger: false, // 清除 debugger 语句
pure_funcs: ['console.log'] // 移除console
}
},
}),
]
},
},
chainWebpack: config => {
// 配置import 和 require 等路径别名,webpack中是通过 resolve.alias 来实现此功能的,通过set方法添加修改想要的alias 配置
config.resolve.alias
.set("@", resolve("src"))
.set("demoData", resolve("public/demoData"))
.set("assets", resolve("src/assets"))
.set("components", resolve("src/components"));
},
};
配置完上面代码，重启即可看到效果。注意：代码只会在production（生产环境）环境下有效，即，项目打包部署之后，就会生效
ps: 还有一个问题需要注意，就是该插件只支持ES5语法，如果你的代码中涉及到ES6语法则会报错。
参考文章
- github.com/webpack-con…
- github.com/mishoo/Ugli…
- blog.csdn.net/weixin_4233…
- mp.weixin.qq.com/s/wu1iSeLII…
都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要
