共计 3268 个字符，预计需要花费 9 分钟才能阅读完成。
微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
先看下本篇次要内容：
文篇次要介绍源代码映射，源代码映射（Source maps）是以 .map 结尾的文件，例如 example.min.js.map 和styles.css.map。大多数构建工具都能够生成源代码映射文件，例如 Vite、webpack、Rollup、Parcel、esbuild 等，一些工具默认蕴含源代码映射，而其余工具则须要额定的配置能力生成它们。
应用源代码映射能够不便地在开发过程中进行调试，因为它们提供了一种将压缩、混同和优化的代码还原为原始源代码的办法。这对于诊断和修复谬误十分有帮忙，特地是在生产环境中。源代码映射还能够帮忙你确定哪些代码行负责执行特定的性能，以及从哪里调用了特定的函数。
只管源代码映射十分有用，然而它们会减少文件大小并减少服务器的负载。因而，在生产环境中通常会禁用它们，而在开发过程中启用它们以便进行调试。如果你应用的构建工具不反对源代码映射，则有可能须要手动编写它们。
上面是注释~~~~
明天，咱们要议论源代码映射，这是古代 Web 开发中十分重要的工具，能够显著地简化调试过程。在本文中，咱们将探讨源代码映射的基础知识，它们是如何生成的，以及它们如何进步调试体验。
须要源代码映射
回到过来的美好时光，咱们应用纯 HTML、CSS 和 JavaScript 构建 Web 应用程序，并将雷同的文件部署到 Web 上。
然而，随着咱们当初构建更简单的 Web 应用程序，开发工作流可能波及应用各种工具。例如：
- 模板语言和 HTML 预处理器：Pug，Nunjucks，Markdown
- CSS 预处理器：SCSS、LESS、PostCSS
- JavaScript 框架：Angular、React、Vue、Svelte
- JavaScript 元框架：Next.js，Nuxt，Astro
- 高级编程语言：TypeScript、Dart、CoffeeScript
这些工具须要构建过程将咱们的代码转换为规范的 HTML、JavaScript 和 CSS，以便浏览器可能了解。此外，为了优化性能，通常会压缩（例如应用 Terser 来放大和混同 JavaScript）和合并这些文件，减小它们的大小并使它们更适宜于 Web。
例如，应用构建工具，咱们能够将以下 TypeScript 文件转换并压缩为一行 JavaScript 代码。
/* A TypeScript demo: example.ts */
document.querySelector('button')?.addEventListener('click', () => {const num: number = Math.floor(Math.random() * 101);
const greet: string = 'Hello';
(document.querySelector('p') as HTMLParagraphElement).innerText = `${greet}, you are no. ${num}!`;
console.log(num);
});一个压缩版本将是：
/* A compressed JavaScript version of the TypeScript demo: example.min.js */
document.querySelector("button")?.addEventListener("click",(()=>{const e=Math.floor(101*Math.random());document.querySelector("p").innerText=`Hello, you are no. ${e}!`,console.log(e)}));然而，这种优化可能会使调试变得更具挑战性。将所有内容压缩到单行中并缩短变量名称的压缩代码可能会使问题的源头难以确定。这就是源映射的作用——它们将编译后的代码映射回原始代码。
生成源代码映射
源映射是以 .map 结尾的文件（例如，example.min.js.map 和 styles.css.map）。它们能够由大多数构建工具生成，例如 Vite、webpack、Rollup、Parcel、esbuild 等等。
一些工具默认蕴含源代码映射，而其余一些工具可能须要额定的配置能力生成它们。
/* Example configuration: vite.config.js */
/* https://vitejs.dev/config/ */
export default defineConfig({
build: {sourcemap: true, // enable production source maps},
css: {devSourcemap: true // enable CSS source maps during development}
})了解源代码映射
这些源映射文件蕴含无关编译代码如何映射到原始代码的根本信息，使开发人员可能轻松调试。这是一个源映射的示例。
{
"mappings": "AAAAA,SAASC,cAAc,WAAWC, ...",
"sources": ["src/script.ts"],
"sourcesContent": ["document.querySelector('button')..."],
"names": ["document","querySelector", ...],
"version": 3,
"file": "example.min.js.map"
}源映射的最要害方面是 mappings 字段。它应用 VLQ 基于 64 编码的字符串将编译文件中的行和地位映射到相应的原始文件。能够应用源映射可视化工具（如 source-map-visualization 和 Source Map Visualization）来可视化此映射。
左侧生成的列显示压缩内容，右侧原始列显示原始起源。可视化工具会为原始列中的每一行和生成列中对应的代码进行着色编码。
映射局部显示了代码的解码映射。例如，条目 65-> 2:2 的意思是：
- 生成的代码：单词
const在压缩内容中的地位为 65。 - 原始代码：单词
const在原始内容中的第 2 行第 2 列开始。
浏览器开发者工具利用这些源映射，帮忙咱们更快地定位调试问题，间接在浏览器中进行。
该图显示了浏览器开发者工具如何利用源映射，并显示文件之间的映射关系。
源映射反对扩大。扩大是以 x_ 命名约定结尾的自定义字段。一个例子是由 Chrome DevTools 提出的 x_google_ignoreList 扩大字段。请参阅 x_google_ignoreList 以理解这些扩大如何帮忙您专一于咱们的代码。
它不完满
在咱们的示例中，变量 greet 在构建过程中被优化掉了。该值间接嵌入到最终的字符串输入中。
在这种状况下，当咱们调试代码时，开发人员工具可能无奈推断和显示理论值。这不仅是浏览器开发人员工具的挑战，也使代码监督和剖析更加艰难。
当然，这是一个能够解决的问题。其中一种办法是像其余编程语言一样，在源映射中蕴含范畴信息，以便进行调试。
然而，这须要整个生态系统共同努力改良源映射标准和实现。目前正在踊跃探讨如何通过源映射来进步调试性能。
咱们期待着改良源代码映射，使调试变得更加简略！
原文：https://web.dev/source-maps/
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文：https://www.builder.io/blog/history-of-reactivity
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。