打包优化-去掉console-log

把下面代码添加到vue.config.js中的chainWebpack(config) {}里面 config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args })

晚上好呀朋友们，今天随笔写小小的知识点，当我们将项目做完后需要上线，而此时打包优化工作就至关重要，这期就将如何打包去掉console.log，看完需要三分钟，而cv只需要三秒！

在本地开发中，会经常使用console.log(),debugger等来查看调试数据，如果没有及时清理，打包到测试或者生产环境，控制台就会有一堆打印的东西，看着很不友好，请保持前端开发的基本素养哈。

一:vue.config.js文件中 二:在chainWebpack(config){}中配置 三:最后的结果 chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args }) } ...

在生产环境中，我们希望移除所有的 console.log 日志。在生产环境中，我们希望移除所有的 console.log 日志。如果 process.env.NODE_ENV 的值为 'production'，则 isProduction 为 true，表示当前环境为生产环境。在 vue.config.js 中，我们可以使用 configureWebpack 方法来配置 webpack 的相关选项。首先，我们需要判断当前环境是否为生产环境。首先，我们需要判断当前环境是否为生产环境。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来。会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?打开 scripts 文件夹下的 build.js 文件。如果本篇文章对你有帮助的话，很高兴能够帮助上你。成功之后 在项目根目录会出现一个。

优化： 1.通过nprogress添加 下载依赖 npm i --save nprogress 在main.js中引入 //导入NProgress对应的js和css importNProgressfrom'nprogress' import'nprogress/nprogress.css' ...

vueCli4配置config.optimization.minimizer(‘terser’)，生产环境去掉console.log debugger ```javascript const devFlag = process.env.NODE_ENV === 'development' chainWebpack: config => { config.when(!devFlag, config => { config.optimization.mini

发现我们在configurewebpack中配置的optimization并没有和webpack默认配置文件中的optimization合并，而是合并到了options中。最近公司项目开发上线后，发现控制台有很多当时测试时打印的信息。但是如果手动删除的话工作量太大，而且不利于以后的维护和debugger。第一步上网找到webpack关于优化console.log语句的插件---------此时我们TerserPlugin插件的默认配置就已经和我们自定义修改的配置进行合并了。接下来就是下载配置，

项目版本： @vue/cli 4.5.15 webpack: 4.46.0 webpack-cli: 4.9.2 webpack-dev-server 3.11.3 vue.config.js配置 chainWebpack: (config) => { // 去掉debugger console config.when(process.env.NODE_ENV !== "development", config => { config.op

目录 整体介绍 路由懒加载 什么是路由懒加载 路由懒加载中的魔法注释 包大小分析 去掉 console-log webpack配置排除打包 整体分析 打包瘦身 引用网络资源 具体配置-在生产环境时生效 webpack配置externals配置项 注入CDN配置到html模板 整体小结: 整体介绍 项目开发完成 打包 ： 用webpack做打包（把.vue, .js, .less -----------> .js, .css, .html） 在项目中都会

默认情况下，Babel 只会处理你的源代码文件，而不会处理 node_modules 目录中的依赖包。这意味着使用 babel-plugin-transform-remove-console 只能移除你自己代码中的 console.log，不能移除依赖包中的 console.log。

vue项目打包时去除所有console（webpack）

webpack打包过滤console等 开发环境下需要console打印很多的数据，但是放在放在线上想过滤掉console，debugger这些， 只要在webpack的配置里面加上一段代码就可以过滤掉。 对于webpack4以上的版本过滤console方法： 1.安装terser-webpack-plugin插件 npm i --save terser-webpack-plugin 2....