Angular 入门教程系列：41：使用source-map-explorer对构建结果进行分析

在前面一篇文章中介绍了使用webpack-bundle-analyzer对构建结果大小进行分析的方法，这篇文章来介绍另外一种工具：source-map-explorer的使用方式。

概要介绍

source-map-explorer是通过对source map文件进行确认之后得出各个组件的分析结果的。而这些source map文件在Angular中则体现为后缀为.map的文件，而这些文件就是source map的文件。

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

以Angular为例，我们在Angular中已经不再是使用原生的JavaScript，而是使用typescript，而我们所写的的这些后缀为.ts的typescript代码作为前端应用运行起来的时候则需要经过编译的过程，而编译则是将这些代码转换为JavaScript代码。而当问题出现的时候，为了定位则需要了解这些转换后的代码和Angular的代码之间的关联映射关系，而这正是source map的作用。
除此之外，随着前端框架的蓬勃发展，在使用的过程中，JavaScript代码的压缩、合并与转换操作也越来越常见，所以作用于定位的source map也非常之重要。

source-map-explorer

• URL链接：https://github.com/danvk/source-map-explorer

使用方法

步骤1: 安装source-map-explorer

安装方法：npm install