Angular入门教程第41节：使用源映射工具分析构建结果

在前面一篇文献中阐述了如何利用webpack-bundle-analyzer来评估构建成果的规模。本文将介绍另一种工具：source-map-explorer及其应用方法。

概要介绍

source-map-explorer 是一种基于 source map 文件进行分析的应用程序。它通过验证 source map 文件来获取各个组件的具体信息，并最终呈现相关的分析结果。在 Angular 开发环境中，默认会在项目目录下生成以 .map 扩展名结尾的支持文档资源来记录编译后的模块信息；这些 .map 文件正是用来描述源代码编译后的模块结构资源信息。

• 为什么会有source map文件呢？

以Angular为例，在该框架中我们已停止使用本生JavaScript语言。

那么那些后缀为.ts文件扩展名的typescript脚本在作为前端应用运行时需经历编译流程。

编译则是将此类脚本转换为标准JavaScript语言。

当出现问题时，则需掌握转换后的脚本与原始Angular脚本间的关联映射关系。

这正是源码映射的作用。

另外值得注意的是，在前端开发框架快速演进的过程中，

JavaScript脚本进行压缩、合并及转化的操作日益普遍。

因此用于定位分析的源码映射同样不可或缺。

source-map-expl