vue项目优化策略去除掉打包文件中的console

最新推荐文章于 2024-02-02 11:27:55 发布
最新推荐文章于 2024-02-02 11:27:55 发布
阅读量375 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AlZhuo/article/details/108444696
版权

安装插件babel-plugin-transform-remove-console，这个插件可以去除掉你在项目中的console。

插件地址：https://www.npmjs.com/package/babel-plugin-transform-remove-console

安装方法：npm install babel-plugin-transform-remove-console --save-dev

官方方法可以在.babelc中加入

.babelrc这个文件是全局共享的，不管是在开发阶段还是发布阶段他都会把console移除掉，那么这样子就会影响开发。但是我的要求只知道发布阶段移除console？如何让他只在开发阶段生效而在发布阶段不生效呢？

 

 

Vue项目优化 —— 移除console
zyf971020的博客
10-09 1533
Vue项目优化 —— 移除console
vite3+vue3 项目打包优化
前端知识分享喵
05-16 2643
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。
vue-cli 正式环境去掉console调试
ylp的博客
03-26 595
正式环境去掉console调试 使用babel-plugin-transform-remove-console插件 npm i --save-dev babel-plugin-transform-remove-console 在babel.config.js中配置 const plugins = []; if(['production', 'prod'].includes(process.env.NODE_ENV)) { plugins.push("transform-remove-conso.
vuecli 清除console debugger等
阿臻
12-15 243
插件名称terser-webpack-plugin@4.2.3 以上版本 webpack4不支持 经测试只有在生产模式下才会生效 解释文档 2文档 从 webpack 4 开始，会根据你选择的 mode 来执行不同的优化， 不过所有的优化还是可以手动配置和重写。 大概描述:如果没有设置mode，webpack 会给 mode 的默认值设置为 production。 结论: 此...
vue 去除控制台 console.log
^_^
04-06 1762
vue 去除控制台 console.log
vue-cli 生产模式去除 console.log
palmer_kai的博客
04-17 5541
preface 最近项目接近尾声， 开始着手项目加载优化操作，简要如下： 大的背景图 进行了在线压缩 第三方引用的模块使用 cdn引入， 如 vue, elementui ，echarts 异步加载 页面 和 某些 css 或者 js 比较大的模块 … vue-cli 如何 去除 console.log 去除 console 应属于 webpack 插件 的事情，所以一定是需要更改webpa...
vue项目发布时去除console语句
qq_43248623的博客
08-12 221
在vue.config.js中添加下面的代码即可 // vue-cli version > 3 modeule.exports = { configureWebpack: config => { if (process.env.NODE_ENV === "production") { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
Vue Cli3 打包配置并自动忽略console.log语句的方法
10-15
本篇文章将详细介绍如何在 Vue CLI 3 中配置打包过程以自动忽略 `console.log` 语句。 首先，为了实现这一目标，我们需要引入一个名为 `uglifyjs-webpack-plugin` 的插件，它允许我们在压缩代码时删除 `console.log...
vue或react项目生产环境去掉console.log的操作
10-14
在构建Vue或React项目时，开发过程中我们通常会在控制台使用console.log()、***()、console.debug()等方法来打印日志信息，帮助我们调试程序。然而，在将应用程序部署到生产环境时，这些日志信息就不再需要了。此时...
Vue - 项目编译速度、性能优化、打包体积优化
iotjin的专栏
06-07 2716
在 Vue.js 项目中，可以使用 Vuex 来管理应用程序的状态，在应用程序中经常需要获取相同的数据，因此可以使用 Vuex 的缓存技术来缓存请求过的数据，在下次请求时直接从缓存中获取数据，从而减少服务器的请求次数，提高用户体验。productionSourceMap的作用在于定位问题，打包时会生成.map文件，在生产环境就可以在浏览器查看到输出的信息具体是在哪一行，但相应的包的体积也会变大，也会影响构建速度，将其设置为false则不生成.map文件。当绑定的表达式为真值时，该元素会被渲染到页面中；
Babel插件，可将有用的详细信息注入控制台语句-JavaScript开发
05-26
队长日志（:skull_and_crossbones:）用法babel-plugin-captains-log将有用的详细信息注入控制台语句。 默认行为：在控制台语句作用域之前添加向控制台st Captain's Log（:skull_and_crossbones:）添加注入变量名称用法babel-plugin-captains-log将有用的详细信息注入控制台语句。 默认行为：在控制台语句文件和位置之前添加将变量名添加到控制台语句中，将函数add（a = 1，b = 2）转换为{console.log（a）; //输出：1返回a + b; }↓↓↓↓↓↓↓函数add（a = 1，b = 2）{console.log（“ simple.js（2：2）”，“ a”，a）; //输出：“ simple.js（2：2）”“ a” 1返回a + b; }请参阅《问题》，以了解将来的功能和操作
babel-plugin-transform-remove-console:添加其他选项
05-14
babel插件转换删除控制台增强 该插件将删除所有console.*调用。 例子 在 console . log ( "foo" ) ; console . error ( "bar" ) ; 出去 在 console . log ( "foo" ) ; console . error ( "bar" ) ; 出去 console . error ( "bar" ) ; // set options to ignore error 安装 npm install babel-plugin-transform-remove-console-enhance 用法 通过.babelrc （推荐） .babelrc { " plugins " : [ " transform-remove-console-enhance " ] } 或者 { " plugins " : [
vue打包以后去掉console.log
轻风细雨_林木木
03-21 730
参考资料：https://blog.csdn.net/u014440483/article/details/87267160
vue中 配置bebel-plugin-transform-remove-console插件 打包时去除所有的console 移除所有的console
qq_41287158的博客
11-08 588
第一步、npm install babel-plugin-transform-remove-console --save-dev 第二步、配置babel.config.js文件 （第一种则是无论是开发阶段还是发布阶段都会把console移除） 第二种：我们只希望在项目发布的阶段移除掉console，测试和开发阶段不需要移除console ...
webpack与vue-cli合并配置，打包生产环境代码时如何删除所有的console.log、代码注释和debugger
weixin_45340607的博客
03-14 4195
发现我们在configurewebpack中配置的optimization并没有和webpack默认配置文件中的optimization合并，而是合并到了options中。最近公司项目开发上线后，发现控制台有很多当时测试时打印的信息。但是如果手动删除的话工作量太大，而且不利于以后的维护和debugger。第一步上网找到webpack关于优化console.log语句的插件---------此时我们TerserPlugin插件的默认配置就已经和我们自定义修改的配置进行合并了。接下来就是下载配置，
vite build 下去除console、debug等无效
Dream
05-20 4266
vite.config.ts种build下必须配置minify（压缩方式）。压缩方式对比率查看以及 build:{ minify: "terser", terserOptions: { compress: { drop_console: true, drop_debugger: true } } }
vue项目打包清除console.log的4种方法
热门推荐
小木木的博客
01-10 1万+
4种打包清除console.log的方法
项目打包时去除console语句的解决方法——babel-plugin-transform-remove-console 插件
最新发布
weixin_55209970的博客
02-02 1099
那么有没有一种只在发布环境时才不显示console的插件呢 于是找到了项目打包时去除console语句的解决方法——babel-plugin-transform-remove-console 插件。.config.js 文件是全局共享的，不管是项目开发阶段（serve）还是项目发布阶段（build），这个配置文件都会生效。vscode插件 javascript console utils 快速生成 / 删除console.log。只在项目发布阶段移除所有的 console。最后重新运行build。
babel-plugin-transform-remove-console 项目打包去除console
qq_43235503的博客
12-18 1073
babel-plugin-transform-remove-console 项目打包去除console
vue项目打包去掉debugger
07-29
要在Vue项目中打包时去掉调试代码（如debugger语句），可以进行以下步骤： 1. 在项目的根目录下找到 `vue.config.js` 文件（如果不存在则需要创建）。 2. 在 `vue.config.js` 文件中添加如下代码： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小猴子编程

请支持一下我的分享

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值