介绍一下sourcemap

窦翊境

Sourcemap（源代码映射）用于将生产环境中的压缩代码映射回原始的源代码。在前端开发过程中，JavaScript、CSS 和其他文件通常会被压缩和混淆，以减小文件大小和提高网站加载速度。然而，这会让调试和错误定位变得困难，因为生产环境中的代码难以阅读和理解。
Sourcemap 的作用是在开发和生产环境之间建立一个桥梁，使开发人员能够在浏览器中查看、调试和分析原始代码，而不是压缩后的代码。这对于错误追踪、性能分析和调试非常有帮助。
Sourcemap 通常以一个单独的文件形式存在，它包含了压缩文件和原始文件之间的映射信息。这些映射信息包括每个源代码文件的位置和行列号。浏览器的开发者工具可以读取这些映射文件，从而在调试过程中显示原始的、未压缩的代码。
在开发过程中，许多构建工具（如 Webpack、Rollup 和 Babel）都支持自动生成和处理 sourcemap。只需要在配置文件中启用相关选项，工具会在生成压缩文件的同时生成相应的 sourcemap 文件。
假设你有一个简单的 JavaScript 文件（main.js）：

1. function add(a, b) {
2.   return a + b;
3. }
5. function subtract(a, b) {
6.   return a - b;
7. }
9. const result = add(10, 20);
10. console.log('Result of add function:', result);
12. const difference = subtract(20, 10);
13. console.log('Result of subtract function:', difference);

复制代码

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

1. !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 文件：

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

复制代码

 
当浏览器的开发者工具检测到这个注释时，它会自动加载 sourcemap 文件，并在调试时显示原始的未压缩代码。这样，当你在浏览器的开发者工具中设置断点、查看堆栈跟踪或查看日志时，你将看到原始的、易于阅读的代码，而不是压缩后的代码。
例如，在上面的 main.js 文件中，如果你在 `console.log` 语句处设置断点，浏览器将显示原始文件（main.js）及其内容，而不是压缩后的文件（main.min.js）。这使得调试和错误定位变得更加简单和高效。
要生成 sourcemap 文件，你可以在构建工具的配置文件中启用相应选项。以下是一个简单的 Webpack 配置文件示例，用于生成 JavaScript 文件的 sourcemap：

1. const path = require('path');
3. module.exports = {
4.   entry: './src/main.js',
5.   output: {
6.     filename: 'main.min.js',
7.     path: path.resolve(__dirname, 'dist')
8.   },
9.   devtool: 'source-map', // 生成 sourcemap
10.   module: {
11.     rules: [
12.       {
13.         test: /.js$/,
14.         exclude: /node_modules/,
15.         use: {
16.           loader: 'babel-loader',
17.           options: {
18.             presets: ['@babel/preset-env']
19.           }
20.         }
21.       }
22.     ]
23.   }
24. };

复制代码

 
在这个配置中，devtool: 'source-map' 表示生成单独的 sourcemap 文件。Webpack 支持不同类型的 sourcemap，例如 inline-source-map（将 sourcemap 信息嵌入到输出文件中）和 cheap-source-map（生成更快但可能不那么精确的 sourcemap）。具体选项可以根据项目需求和调试需求进行选择。
生成 sourcemap 后，你可以在生产环境中轻松地调试和定位错误。但请注意，sourcemap 文件可能会泄露源代码信息，因此在部署到生产环境时，应确保不将 sourcemap 文件公开暴露。可以通过将 sourcemap 文件仅上传到错误跟踪服务，或在服务器上配置访问权限，以防止未经授权的访问。

来源:https://www.cnblogs.com/ronaldo9ph/p/17301921.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！