专栏首页WebJ2EE前端:Source Map 那些事

前端:Source Map 那些事

1. Source Map 是什么?有什么用?

为了提高 WEB 应用首屏响应速度,最容易想到方法的就是:

  • 降低请求数量:JS、CSS文件合并;
  • 降低请求资源大小:JS、CSS文件压缩;

但是,这给线上环境的调试带来了麻烦。

图:没有 source map 的线上环境

Source Map,就是能让我们在线上调试时看到原始代码的一种技术,它实际是一个是个映射文件,它提供了【压缩合并后代码】到【原始代码】间的行列转换关系。

图:有 source map 的线上环境

图:修正错误后...

2. Source Map 怎么生成?

能生成 Source Map 的工具有很多

列举几个常用的

2.1. uglify-js

仓库: https://github.com/mishoo/UglifyJS2 安装: npm install uglify-js -g 示例: uglifyjs reducer.js --compress --mangle --output reducer.min.js --source-map "url='reducer.min.js.map'"

图:uglify 使用示例

2.2. babel

官网: https://babeljs.io/ 示例: npx babel src --out-dir lib --source-maps

图:babel 使用示例

2.3. webpack

官网: https://webpack.js.org/

图:webpack 使用示例

3. Source Map 表现形式

3.1. 外部独立 SourceMap

ES6源码:

Babel编译转换后:

npx babel square.js --out-file square.min.js --source-maps

外部SourceMap文件:

图:文件目录结构

3.2. 内联 SourceMap

ES6源码:

Babel编译转换后:

npx babel square.js --out-file square.min.js --source-maps inline

图:文件目录结构

4. Source Map 文件结构分析

以 square.js

编译生成的 square.js.map 为例

下面重点关注 mappings 字段

  • 01. 编译后的“行”,由 “;” 分割;

;;;;;;;AAAA,IAAM,MAAM,GAAG,SAAT,MAAS,CAAC,CAAD;AAAA,SAAO,CAAC,GAAG,CAAX;AAAA,CAAf;;eAEe,M

  • 02. “行”内用“,”分割为“段”,每个段由1位、4位或5位 【base64 VLQ】 字符组成;

;;;;;;;AAAA,IAAM,MAAM,GAAG,SAAT,MAAS,CAAC,CAAD;AAAA,SAAO,CAAC,GAAG,CAAX;AAAA,CAAf;;eAEe,M

  • 03. “段”内各【base64 VLQ】编码位含义如下:

——摘抄自 Source Map 第三版规范

参考:

《An Introduction to Source Maps》: https://blog.teamtreehouse.com/introduction-source-maps https://demos.mattwest.io/source-maps/ 《Source Maps 101》: https://code.tutsplus.com/tutorials/source-maps-101--net-29173 Source Map 资料汇总: https://github.com/ryanseddon/source-map Source Map 可视化工具: https://github.com/pvdz/sourcemapper https://sokra.github.io/source-map-visualization/ Source Map 规范: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.hval2vfopveu Source Map 原理: http://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html webpack 的 Source Map: https://survivejs.com/webpack/building/source-maps/ https://www.webpackjs.com/configuration/devtool/

本文分享自微信公众号 - WebJ2EE(WebJ2EE),作者:WEBJ2EE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring周边:XML

    DOCTYPE 声明为文档提供一个空间,通过引用外部文件、通过直接声明或通过这两种方式来标识其根元素和文档类型定义 (DTD)。DOCTYPE 声明可以包含下列...

    WEBJ2EE
  • React:Redux源码分析

    Redux 是JavaScript 应用的状态管理容器,提供集中式、可预测的状态管理。

    WEBJ2EE
  • React:Table 那些事(1)—— 写在前面

    WEBJ2EE
  • MongoDB系列7:MongoDB存储引擎

    1、前言 存储引擎是数据库的组成部分,负责管理数据存储。 MongoDB支持的以下存储引擎: 存储引擎描述WiredTiger存储引擎从MongoDB 3.2开...

    大数据和云计算技术
  • web前端必会的六项技能,小白可以借鉴一下

    web前端工程师是近几年才发展出来的新式作业,也是现在火爆且高薪的作业。 大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如规划师、后台程序员、...

    企鹅号小编
  • [Qt]QButtonGroup与QCheckBox、QRadioButton的使用指南

    原文链接:https://blog.csdn.net/humanking7/article/details/85786540

    祥知道
  • MySQL逻辑架构简介

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    用户1208223
  • 如何选择TensorFlow安装环境

    许多软件都会使用一些库和独立维护的软件包。对于开发者而言,这是一件好事,因为这种做法有利于代码复用,而且他们 可专注于创建新的功能,而无需重复造轮。然而,这种做...

    企鹅号小编
  • 代码整洁之道--边界

    静儿
  • LSMW批量数据处理的操作流程

    SAP通过BDC(录屏)方式进行数据批量处理有两种方式,分别是LSMW和SM35。这里介绍一下LSMW的操作流程。

    用户5495712

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动