当前位置:网站首页>删除 console 语句引发的惨案
删除 console 语句引发的惨案
2022-07-07 14:11:00 【巴山却话】
前言:
虽然 babel-plugin-transform-remove-console 已经几年不更新了,但打包时去除 console 语句还是比较省时省力,所以项目中也就用了,没想到反而费劲了
本来问题很简单,但有时候不细心,可能就会浪费大量的时间解决问题,所以写篇博客,方便他人
急急如律令,喷子请绕行
1、安装和使用
安装
npm i babel-plugin-transform-remove-console
配置(babel.config.js)
// 存储项目发布阶段需要用到的插件
const productPlugins = []
// 如果用户运行的是打包命令(npm run build)则向数组中注入插件
if (process.env.NODE_ENV === 'production') {
//发布阶段
productPlugins.push("transform-remove-console")
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
...productPlugins
]
}
此时,使用 npm run build
命令打包就会移除文件中的 console 语句,经过测试,确实是这样
2. 删除 map 文件
后来,为了进一步减少 dist 目录的体积,决定将 productionSourceMap 设为 false,目的是打包时不生成 map 映射文件,这个过程就除了问题
2.1 什么是 map 文件?
先看一下,默认情况下生成的 dist 目录
- 4 个 js 文件,4个 map 文件
- js 目录一共14M,4个map文件占了11M
这几个 map 文件到底是干什么的呢?
其主要作用就是在打包之后的js文件与打包之前的源代码文件之间建立映射,这样虽然打包前后的代码看起来不一样,但当运行时发生错误时,仍然可以定位到发生错误的源文件
下面我们来演示看看
比如,我们故意在 App.vue 中计入如下代码
methods: {
f1() {
return a + 5
},
},
created() {
this.f1()
},
开发模式下,运行页面,报错信息如下
点击出错的文件,还可以直接定位
项目打包之后呢?
我们打包之后,在运行代码,发现控制台中一篇空白,不是说只要打包后有 map 文件,发生错误后,不仅会在控制台打印错误,还能定位到错误的源文件吗?
2.2 消失的 console
思考一下,当程序报错后,控制台中的错误信息是由谁输出的?
比如下面的错误,提示 a is not defined
很显然,是由 vue 通过 console.error 在控制台打印的
但我们查看上面看到的4个js文件和4个map文件后发现,没有任何一条 console 语句,为什么?
原因很清除,就是包括开发者自己编写的console语句和程序引入的一些依赖中的 console语句,都被 babel-plugin-transform-remove-console 插件移除了
原来 babel-plugin-transform-remove-console 插件可以删除所有文件中的 console 语句(这不是理所当然的吗)
2.3 如何解决
其实,官方文档早就说了
所以,修改 babel.config.js 中配置,为删除添加例外,这样所有文件中的 console.error 和 console.warn 就保留了
此时,可以查看打包生成的 js 和 map 文件中,充斥着大量的上面两种语句
重新打包后,再次运行
发现果然输出错误了,而且提示错误发生在哪个源文件
2.4 取消 map 文件
最后,可以取消生成 map 文件了
vue.config.js 中
重新打包,然后运行,仍然包括,但已经无法定位到具体发生错误的源文件了,而是生成之后的文件
仔细查看 dist/js 目录,发现已经没有 map 文件了,当然dist 目录的体积小了很多
客户端请求时,也不会下载 map 文件,所以速度也会有所提升
3. 总结
babel-plugin-transform-remove-console 插件的使用本来非常简单,但如果细翻大家的帖子,好像都是同一个模板拷贝过来的,居然都很少有人提及 exclude 属性的作用,如果是个新人碰到类似上面的问题,可能就会花费大量时间解决,所以写这篇博客,方便他人
边栏推荐
- Odoo integrated plausible embedded code monitoring platform
- Three. JS introductory learning notes 08:orbitcontrols JS plug-in - mouse control model rotation, zoom in, zoom out, translation, etc
- nodejs package. JSON version number ^ and~
- Three. JS introduction learning notes 12: the model moves along any trajectory line
- ThinkPHP URL 路由简介
- 应用程序和matlab的通信方式
- TS typescript type declaration special declaration field number is handled when the key key
- 10 schemes to ensure interface data security
- 无线传感器网络--ZigBee和6LoWPAN
- 用手机在通达信上开户靠谱吗?这样炒股有没有什么安全隐患
猜你喜欢
2022第四届中国(济南)国际智慧养老产业展览会,山东老博会
Unity3d click events added to 3D objects in the scene
过度依赖补助,大客户收款难,冲刺“国产数据库第一股”的达梦后劲有多足?
航運船公司人工智能AI產品成熟化標准化規模應用,全球港航人工智能/集裝箱人工智能領軍者CIMC中集飛瞳,打造國際航運智能化標杆
Three. JS introductory learning notes 07: external model import -c4d to JSON file for web pages -fbx import
强化实时数据管理,英方软件助力医保平台安全建设
分步式监控平台zabbix
山东老博会,2022中国智慧养老展会,智能化养老、适老科技展
Leetcode-231-2的幂
Description of vs common shortcut keys
随机推荐
安科瑞电网智能化发展的必然趋势电力系统采用微机保护装置是
Three. JS introductory learning notes 04: external model import - no material obj model
招标公告:盘锦市人民医院盘锦医院数据库维保项目
Sysom case analysis: where is the missing memory| Dragon lizard Technology
Bidding announcement: 2022 Yunnan Unicom gbase database maintenance public comparison and selection project (second) comparison and selection announcement
Learn good-looking custom scroll bars in 1 minute
Markdown formula editing tutorial
Logback logging framework third-party jar package is available for free
分步式監控平臺zabbix
Shipping companies' AI products are mature, standardized and applied on a large scale. CIMC, the global leader in port and shipping AI / container AI, has built a benchmark for international shipping
Multiplication in pytorch: mul (), multiply (), matmul (), mm (), MV (), dot ()
Three. JS introductory learning notes 0: illustration of how webgl and threejs work
Excessive dependence on subsidies, difficult collection of key customers, and how strong is the potential to reach the dream of "the first share of domestic databases"?
Three. JS introductory learning notes 10:three JS grid
Good news! Kelan sundb database and Hongshu technology privacy data protection management software complete compatibility adaptation
hellogolang
Vite path alias @ configuration
iptables只允许指定ip地址访问指定端口
Introduction to pyGame games
通知Notification使用全解析