介绍一下sourcemap

这篇具有很好参考价值的文章主要介绍了介绍一下sourcemap。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Sourcemap(源代码映射)用于将生产环境中的压缩代码映射回原始的源代码。在前端开发过程中,JavaScript、CSS 和其他文件通常会被压缩和混淆,以减小文件大小和提高网站加载速度。然而,这会让调试和错误定位变得困难,因为生产环境中的代码难以阅读和理解。

Sourcemap 的作用是在开发和生产环境之间建立一个桥梁,使开发人员能够在浏览器中查看、调试和分析原始代码,而不是压缩后的代码。这对于错误追踪、性能分析和调试非常有帮助。

Sourcemap 通常以一个单独的文件形式存在,它包含了压缩文件和原始文件之间的映射信息。这些映射信息包括每个源代码文件的位置和行列号。浏览器的开发者工具可以读取这些映射文件,从而在调试过程中显示原始的、未压缩的代码。

在开发过程中,许多构建工具(如 Webpack、Rollup 和 Babel)都支持自动生成和处理 sourcemap。只需要在配置文件中启用相关选项,工具会在生成压缩文件的同时生成相应的 sourcemap 文件。

假设你有一个简单的 JavaScript 文件(main.js):

function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

const result = add(10, 20);
console.log('Result of add function:', result);

const difference = subtract(20, 10);
console.log('Result of subtract function:', difference);

 

在部署到生产环境之前,你可能会使用某个构建工具(如 Webpack 或 UglifyJS)将其压缩和混淆。压缩后的代码可能看起来像这样(main.min.js):

!function(n){var r={};function e(t){if(r[t])return r[t].exports;var o=r[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,e),o.l=!0,o.exports}e.m=n,e.c=r,e.d=function(n,r,t){e.o(n,r)||Object.defineProperty(n,r,{enumerable:!0,get:t})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,r){if(1&r&&(n=e(n)),8&r)return n;if(4&r&&"object"==typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(e.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&r&&"string"!=typeof n)for(var o in n)e.d(t,o,function(r){return n[r]}.bind(null,o));return t},e.n=function(n){var r=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(r,"a",r),r},e.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},e.p="",e(e.s=1)}([function(n,r,e){console.log("Result of add function:",e(3)(10,20)),console.log("Result of subtract function:",e(2)(20,10))},function(n,r){n.exports=function(n,r){return n+r}},function(n,r){n.exports=function(n,r){return n-r}},function(n,r,e){"use strict";r.__esModule=!0,r.default=void 0;var t=e(1),o=e.n(t),u=e(2),c=e.n(u);r.default=function(n,r){return"add"===n?o()(r[0],r[1]):"subtract"===n?c()(r[0],r[1]):void 0}}]);

 

显然,这段代码很难阅读和调试。为了解决这个问题,你可以为该文件生成一个 sourcemap(main.min.js.map)。这个 sourcemap 文件会包含映射信息,使浏览器能够将压缩代码映射回原始代码。

压缩后的文件通常还包含一个注释,指向对应的 sourcemap 文件:

//# sourceMappingURL=main.min.js.map

 

当浏览器的开发者工具检测到这个注释时,它会自动加载 sourcemap 文件,并在调试时显示原始的未压缩代码。这样,当你在浏览器的开发者工具中设置断点、查看堆栈跟踪或查看日志时,你将看到原始的、易于阅读的代码,而不是压缩后的代码。

例如,在上面的 main.js 文件中,如果你在 `console.log` 语句处设置断点,浏览器将显示原始文件(main.js)及其内容,而不是压缩后的文件(main.min.js)。这使得调试和错误定位变得更加简单和高效。

要生成 sourcemap 文件,你可以在构建工具的配置文件中启用相应选项。以下是一个简单的 Webpack 配置文件示例,用于生成 JavaScript 文件的 sourcemap:

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'main.min.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'source-map', // 生成 sourcemap
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

 

在这个配置中,devtool: 'source-map' 表示生成单独的 sourcemap 文件。Webpack 支持不同类型的 sourcemap,例如 inline-source-map(将 sourcemap 信息嵌入到输出文件中)和 cheap-source-map(生成更快但可能不那么精确的 sourcemap)。具体选项可以根据项目需求和调试需求进行选择。

生成 sourcemap 后,你可以在生产环境中轻松地调试和定位错误。但请注意,sourcemap 文件可能会泄露源代码信息,因此在部署到生产环境时,应确保不将 sourcemap 文件公开暴露。可以通过将 sourcemap 文件仅上传到错误跟踪服务,或在服务器上配置访问权限,以防止未经授权的访问。文章来源地址https://www.toymoban.com/news/detail-409365.html

到了这里,关于介绍一下sourcemap的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 安全测试方法介绍(上)静态源代码审查

    软件开发完成之后,我们需要进行安全验证,验证我们的软件是不是符合安全要求。软件安全测试主要有以下几个方面:确定软件的安全特性实现是否与预期设计一致的过程;有关验证软件安全等级和识别潜在安全缺陷的过程;查找软件自身程序设计中存在的安全隐患,并检

    2024年02月15日
    浏览(43)
  • 【Python | 深度学习】safetensors 包的介绍和使用案例(含源代码)

    safetensors 是一种用于安全存储张量(与 pickle 相反)的新型简单格式,并且仍然很快(零拷贝)。 safetensors 真的很快。 仅加载部分张量(在多个GPU上运行时很有趣): safetensors 真的很快。让我们通过加载 gpt2 权重将其进行比较。要运行 GPU 基准测试,请确保您的机器具有 G

    2024年02月08日
    浏览(64)
  • 用Java实现学生管理系统(附项目详细的介绍和源代码)

    前言 :最近练习了用Java语言实现简单的 学生管理系统小项目 ,分享一下。 Ps:原创不易,请多多支持! 摘要分析如下: 实现的主要功能: 1,添加学生信息。 2,查询学生信息(实现了单个学生信息查询 所有学生信息查询)。 3,修改学生信息。 4,删除学生信息(实现了单个

    2024年02月08日
    浏览(85)
  • 【Java项目介绍和界面搭建】拼图小游戏完结——源代码分析以及资料上传

    目录 以后工作的时候拿到一个需求之后: 1,所需要的技术点 2,分析业务逻辑 项目实现步骤: 添加组件 绑定事件: 分析业务逻辑 分析所需要的技术点 在这个界面中,我们需要哪些技术点: 整个的菜单就是JMenuBar 功能,关于我们:JMenu 更换图片:JMenu 重新游戏,重新登录

    2024年03月11日
    浏览(63)
  • 【计算机视觉 | Pytorch】timm 包的具体介绍和图像分类案例(含源代码)

    timm 是一个 PyTorch 原生实现的计算机视觉模型库。它提供了预训练模型和各种网络组件,可以用于各种计算机视觉任务,例如图像分类、物体检测、语义分割等等。 timm 的特点如下: PyTorch 原生实现: timm 的实现方式与 PyTorch 高度契合,开发者可以方便地使用 PyTorch 的 API 进行

    2024年02月15日
    浏览(41)
  • Pyqt搭建YOLOv5目标检测系统(可视化界面+功能介绍+源代码)

    软件界面如下所示: 功能: 模型选择 输入选择(本地文件、摄像头、RTSP视频流) IoU调整 置信度调整 帧间延时调整 播放/暂停/结束 统计检测结果 详细介绍: 1.首先进行模型的选择(官网可下载),包含四种,分别是yolov5s.pt、yolov5m.pt、yolov5l.pt和yolov5x.pt。 2.选择置信度、IoU和

    2023年04月08日
    浏览(88)
  • 【计算机视觉 | 目标检测】YOLO-NAS的介绍以及如何使用?(含源代码)

    Github 仓库: 参考QARepVGG,该方案引入了QSP与QCI模块以同时利用重参数与8-bit量化的优化; 该方案采用AutoNAC搜索最优尺寸、每个stage的结构,含模块类型、数量以及通道数; 采用混合量化机制进行模型量化,既考虑了每一层对精度与延迟的影响,也考虑了8-bit与16-bit之间切换对

    2024年02月03日
    浏览(43)
  • 手把手带你死磕ORBSLAM3源代码(三十)Tracking.cc PreintegrateIMU介绍

    目录 一.前言 二.代码 2.1 完整代码 2.2 预积分技术     Tracking::PreintegrateIMU() 是 Tracking 类中的一个成员函数,用于对从IMU(Inertial Measurement Unit,惯性测量单元)获取的数据进行预积分处理。预积分是视觉-惯性里程计(VIO)中的一个关键技术,它允许将多个IMU测量值整合到一

    2024年02月03日
    浏览(78)
  • 【SA8295P 源码分析】83 - SA8295P HQNX + Android 完整源代码下载方法介绍

    因为一些原因,本文需要移除, 对于已经购买的兄弟,不用担心,不是跑路, 我会继续持续提供技术支持, 有什么模块想学习的,或者有什么问题有疑问的, 请私聊我,我们 +VX 沟通技术问题

    2024年02月11日
    浏览(43)
  • 手把手带你死磕ORBSLAM3源代码(二十九)Tracking.cc GrabImageMonocular介绍

    目录 一.前言 二.代码 2.1 完整代码 2.2 单目相机估计深度结构     Tracking::GrabImageMonocular 是 Tracking 类中的另一个成员函数,用于从单目相机(Monocular Camera)捕获的图像中提取信息,创建一个新的帧ÿ

    2024年02月02日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包