SourceMaps Demystified (.js.map)
当我们构建 Angular 应用程序时，会创建 js 文件和 .js.map（源映射文件）文件。
从本质上讲，源映射是一个 JSON 文件，其中包含将转译后的代码映射回原始源所需的所有信息。
- ng build --prod - 生产构建 - 没有源映射
- ng build - dev build - 存在源映射
- version：表示源映射规范版本
- file：此源映射所属的转译文件的名称
- sourceRoot: basePath — 源相对于这里定位
- sources：原始源文件的路径（例如 TypeScript 文件）
- sourcesContent：可选属性，可以包含您的整个源代码。
当源代码在此属性中内联时，无需托管源即可检索。 - names：在代码中找到的方法或变量名称
- mappings：这是整个魔术发生的地方。从技术上讲，映射属性是一个非常大的字符串，其中包含 Base64 VLQ（可变长度数量）值。这些值有助于找到源文件中的原始位置。
Dev Build vs Production Build
正如我们所知，dev build 默认遵循 jit 编译，它创建映射文件，但在生产构建中遵循 aot 编译，不会创建映射文件。
Source Maps during Development
Source maps 帮助我们在开发工具中的 webpack:// 下显示我们的原始源代码。我们现在可以打开 app.component.ts 并在 app.component.ts 文件中放置一个断点。
让我们尝试在没有 sourcemap 文件的情况下运行项目，这类似于生产构建，因为在生产构建中我们将没有映射文件。
ng serve --sourceMap=false
我们在哪里设置断点？ 我们需要手动在转换后的 JavaScript 文件中找到我们的函数，这很麻烦。
SourceMapExplorer
To install for project:
npm install source-map-explorer --save-dev
To Install Globally:
npm install -g source-map-explorer
The source map explorer determines which file each byte in your minified code came from. It shows you a treemap visualization to help you debug where all the code is coming from.
可以通过这个video学习。
更多Jerry的原创文章，尽在：“汪子熙”:
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
