当咱们的 [Angular](https://medium.com/angular-in…
) 应用程序部署到生产环境时，咱们常常会遇到与咱们在开发过程中编辑的不同的代码。咱们的代码在构建过程中会以各种形式进行批改和优化。

TypeScript 被 transpiled, minified 和 uglifed。生成的 JavaScript 包尽可能小，并且可能在浏览器中运行。

所有这些概念都很棒，因为它们进步了咱们应用程序的性能。然而，这也给生产零碎的故障排查带来了一些艰难。

SourceMap 是一个解决方案。

从实质上讲，源映射是一个 JSON 文件，其中蕴含将转译后的代码映射回原始源所需的所有信息。很酷！
从技术上讲，源映射只是一个蕴含以下字段的 JSON 文件：

• version : 示意源映射标准版本
• file : 此源映射所属的转译文件的名称
• sourceRoot : basePath — 源绝对于这里
• sources : 原始源文件的门路（例如 TypeScript 文件）
• sourcesContent : 可选属性，能够蕴含您的整个源代码。当源代码在此属性中内联时，无需托管源代码即可检索。
• names：代码中找到的办法或变量名称
• mappings：这是整个魔术产生的中央。从技术上讲，映射属性是一个十分大的字符串，其中蕴含 Base64 VLQ（可变长度数量）值。这些值有助于找到源文件中的原始地位。

如何检索源映射？

要检索源映射，咱们须要通知浏览器它们所在的地位。咱们能够通过增加以下行在文件开端指定
sourceMappingURL：

例子：

//# sourceMappingURL=pathToSourceMaps

有了这些信息，浏览器就能够下载源映射文件并解释其内容以创立映射。

留神：浏览器仅在开发者工具关上时下载源地图。对于普通用户，没有性能影响。

除了在文件开端增加正文之外，您还能够 SourceMap 在获取 minified 的 JavaScript 文件的响应中将门路作为 HTTP 标头的值发送。

SourceMap: pathToSourceMap

第二种可能性使您能够在服务器端切换源映射，而无需更改 minified 之后的 JavaScript 文件。

开发和生产期间的源映射

开发和生产版本不同。

在开发过程中，领有残缺的源图是有意义的，因为咱们专一于工具、开发教训或 hot module 替换。

另一方面，在生产中，咱们专一于性能——应用 small bundles 疾速初始加载。

应该在生产过程中启用源映射吗？

这个问题的答案很大水平上取决于您的我的项目。如果您正在从事开源我的项目，那么必定是这样。

然而咱们大多数人在日常工作中并不从事开源我的项目。在企业我的项目中，您有充沛的理由不想公开您的源代码。

• 咱们不想裸露易于浏览的利用程序代码给外界。
• 更快的构建
• 不想裸露 source map 的提供源头

上面介绍如何在生产环境启用 Source Map，然而不裸露其起源。

Angular CLI 容许咱们配置是否须要源映射。而后它将这些信息传递给底层的 Webpack。

要摸索 Angular 中的源映射，让咱们从一个由 Angular CLI 生成的全新 Angular 我的项目开始。

ng new sourceMapInspector

Component 实现很简略：

public changeTitle(): void {this.title = 'awesome app';}

模板里的生产代码：

<button (click)="changeTitle()">Change title</button>

应用 ng serve 命令。

源映射帮忙咱们在开发工具中显示咱们的原始源。

咱们当初能够关上 app.component.ts 并在 changeTitle 函数内搁置一个断点。通过单击“更改题目”按钮，咱们而后点击了咱们的断点。

如果咱们查看 main.js 文件的最初一行，咱们能够看到浏览器获取源映射的地位。

//# sourceMappingURL=main.js.map
这对开发十分有用。咱们有残缺的源映射，能够轻松调试咱们的代码。

让咱们检查一下 Angular 中的生产构建在源映射方面的行为。咱们能够应用以下命令运行 prod 构建。

ng build –prod

该 dist 文件夹当初蕴含没有 source map 的捆绑文件。让咱们切换到该 dist 文件夹并在 HTTP 服务器上运行该应用程序，以理解它在生产中的外观。

能够应用 npm 模块 http-server 作为本地 Web 服务器。
http-server 是一个简略的、零配置的命令行 http 服务器，能够装置 npm i -g http-server

因而，让咱们运行咱们的生产版本并关上开发工具来调试咱们的性能。

在生产模式下，没有起源，也没有可供点击的 Webpack 菜单项。

咱们在哪里设置断点？咱们须要手动在转换后的 JavaScript 文件中找到咱们的函数，这很麻烦。
咱们在第 7841 行设置了断点，即便咱们的应用程序只蕴含几行代码。

将源映射增加到 Angular 生产构建

angular.json 文件蕴含一个 architect 属性，容许咱们指定是否要为咱们的生产构建应用源映射。

要启用源映射，咱们须要将 sourceMap 属性更改为 true 或通过传递 –source-map 给咱们的 ng build 命令来笼罩它。

这种办法会将源映射增加到咱们的生产构建中并在生产中获取它们，以便每个人都能够拜访咱们的源。

对源映射的细粒度管制️

Angular 7.2 为咱们提供了对源映射的更细粒度管制。该 sourceMap 属性当初承受具备以下属性的对象，而不是一个简略的 boolean 值。

"sourceMap": {
  "hidden": true,
  "scripts": true,
  "styles": true
}

scripts 和 styles 属性容许咱们只为 scripts 或者 styles 生成 source map.

而 hidden 属性，顾名思义，能够生成暗藏的 source map.

源映射自身对于惯例构建或带有暗藏源映射的构建没有区别。只有生成的包在一行中有所不同——webpack 增加的用于检索源映射的正文。

让咱们看一下应用源映射生成的包。

留神最初的一行正文语句。当咱们关上开发工具时，浏览器将解释此正文并尝试获取源映射。当初让咱们看一下应用暗藏源映射生成的包。

咱们能够看到文件开端没有增加正文。因而浏览器不会尝试获取源映射。如果有一种办法能够应用一些简略的 npm 脚本来解决生产环境中的源映射呢？

上传本地源地图

咱们总是能够在本地从新生成源映射并在当前上传它们。

"sourceMap": { 
  "hidden": true, 
  "scripts": true, 
  "styles": true 
}

接下来，咱们须要创立一个 postbuild 脚本，该脚本仅删除咱们刚刚生成的源映射。

"postbuild": "rm dist/sourceMapInspector/*.map"

该 postbuild 脚本是必须的，否则咱们将提供源映射。因为短少 comment，它们不会被解析。但他们依然被提供。

为了在生产中进行调试，咱们手动上传源映射。然而咱们从哪里失去它们呢？咱们刚刚删除了它们。
答案很简略，咱们须要从新生成它们。

"build:sourcemaps": "ng build --prod --output-path=localSourceMaps"

咱们当初能够应用 Chrome 开发工具从本地文件系统上传源映射。因而，关上开发工具并右键单击您的 main[hash].js. 当初输出下面脚本生成的源映射的门路。

必须按以下形式增加门路：file///pathToFile.

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: