IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue之sourcemap -> 正文阅读

[JavaScript知识库]vue之sourcemap

在前端项目投入生产环境之前,需要对js代码进行压缩,从而减小代码体积,提高运行效率。

例如压缩后的代码:
在这里插入图片描述

代码压缩之后就会压缩在一起变成一行代码,变量被替换成没有任何意义的名字,空行和注释都被剔除。
当你进行bug调试的时候,就找不到头绪。

这时就需要用到sourcemap了,sourcemap是一个信息文件,里面存储这你未压缩之前代码的位置信息。

当你出错调试的时候,调试工具就会根据sourcemap记录的位置信息,直接显示未压缩前的代码。
在这里插入图片描述
webpack默认开启sourcemap。

sourcemap生成的代码是压缩后转换的代码,会导致自己运行时,报错的行数与自己写的源码行数不一致。

例如当报错的行数是20行,但你写的源码中却是14行。

在这里插入图片描述
解决方法:可以在开发环境下的webpack.config.js配置文件中添加如下配置:
eval-source-map仅限在开发环境中使用,生产环境下不可用。
在这里插入图片描述

在生产环境下开启sourcemap

在生产环境下调试用nosourcemap-source-map方式

将devtool:‘nosource-source-map’
此时状态下的调试,就只会将代码定位到多少行,不会跳转源码。这样就会提高代码的安全性,避免遭到攻击。

之后你就根据报错的行数,找到你写的源码,进行bug修改就好了。
在这里插入图片描述
在生产环境下,非得要看报错行数,展示源码。可以将devtool设置成source-map

devtool:'source-map'

在这里插入图片描述

小结:

在生产环境下,要不写成 nosource-source-map方式,要不就删除devtool,相当于关闭了sourcemap;这是在生产环境下的设置。

在开发环境下直接将devtool设置成eval-source-map

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-11-05 00:19:49  更:2022-11-05 00:21:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/17 19:03:56-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码