00:01
接下来呢,我们去进行提升开发体验的优化。我们未来呢,在学习这个高级优化的时候啊,我们都会从三个角度去讲。我们来一起看啊。他一共有三个问题,第一个是为什么。也就是说,我们为什么要去使用它?第二个是是什么。它是个怎样的技术?最后一个呢,是怎么用。那么我们在学习这个优化的时候一定要清楚啊,就是为什么我们为什么要使用它,在什么场景下要去考虑使用它,这点尤其重要。只有搞清楚了为什么,我们才会知道该怎么去用它。所以每次呢,我们会给大家讲清楚,就是这个技术到底应该怎在什么场景下去使用,那么希望大家应该要掌握好。好,那么我们回到正题啊,我们继续来看这个map第一个。那么我们为什么要使用一个这样的技术呢?
01:02
这时我们就要注意,开发时呢,我们运行代码呢,是经过外派编译的。那么他大概长下面这个样子。OK,我们呢,也可以实际运行一下,看下效果啊。呃,来,我终止一下,我们重新把咱们的开发服务器给启动一下。NPM。OK,启动完成了,我的开发环境的代码呢,就在这里运行了。那么前面我们也提过,开发环境下是没有输出的,是在内存中编译打包的。但是我又想看它内存中B打包的代码,怎么看呢?我们只要用键检查在这个sources。在这啊,在sources里面呢,我们就能看到它编译后的代码,比方说这个man GS。大家看啊,这个面JS呢,它的下面有很多注释,以及每一个模块呢,都是通过一我函数包裹。诶,那么这样的话呢,将来啊,万一代码出错了,它提示的错误的函数和文件就会有很大的问题。
02:10
对吧,这就是我们接下来要研究的。下面我们可以一起试一下。我们呢,来到这个3.js对吧,在这里面呢,我们去做一些事,故意让这个程序运行报错,比方说我把reduce掉两次。那么reduce方法的返回值呢?是一个number类型,它如果再调用几会报错?但我们是故意写一个错误啊,实际开发呢,可能你不一定会这样做,但是我们实际开发中呢,随着我们程序的日益增大啊,可能会有时候会出现一些莫名其妙的问题,或者说你不小心写出的问题。那么我们假设这里就是我不小心写的错误。好,此时呢,我们如果去看开发环节代码呢,Cancel,那么它就会报错,很好,它已经提示了这个六报错,但是它提示的这个函数呢,是不太正确的。
03:08
点过去是不太正确的,但是它下面的提示倒是还好啊,提示到的是在这里,但是大家看啊,它提示的错误呢,是编译后的错误。我们现在文件比较少,所以一看就知道是萨DS,但是万一将来我们的文件有几千行以上,那么几千行经过变异呢?可能有上万行的代码,那么你再去观察这个错误出现在是哪个地方,那就非常的麻烦了。所以这就是我们现在存在这个问题啊,就是开发的时候呢,一旦代码出错了,它提示代码的这个错误位置呢,是编译后代码的位置不太友好。而我们想提示原文件的这个位置,源代码出错的位置,对吧,诶这个时候呢,我们就要用下这个source map的技术。
04:00
OK,那么map是什么呢?我们接下来介绍,它是一个源代码映射的一个技术。意思就是它会生成一个文件。这个文件呢,会会保存着源代码和构建后输出的代码,他们每一行一映射的一个关系。对吧?那么有了映射关系呢?那么我们将来就可以通过这个构建后代码出错的位置再找到这个map文件,然后就能找到源代码文件出错的位置了。大概是这样的意思。就是生成一个什么什么文,一个文件,这个文件的叫什么什么点文件。里面包含了源代码和构建代码。每一行、每一列的一个。代码的映射关系,一旦构建后代码出错了,就会找到这个map文件啊,从构机后代码出错的位置找到源代码出错的位置,然后呢,让浏览器呢,能够提示源代码出错的位置,我们也能够快速的点击,快速的找到源代码出错的位置。
05:03
这样呢就方便调试了,它是这样一个技术。我们只要我们要做的就是要生成这个map文件,只要生成了这个文件,浏览器会帮我们自动的去映射查找这个这个文件的位置,所以我们并不需要关心了。那么怎么生成这个map文件呢?我们一起来看啊,我们这里呢,提供了一个pad官方的一个文档。在这里呢,他介绍了这个foma的生成方式,配置方式呢叫DB tool开发者调试工具。它能够让我们选择生成source map的一种方式来生成,而source map文件的生成的方式有很多种。它下面给你列举的。嗯。整体的呢,有什么evil啊,有evil map。意思就是这个d tool的值啊,如果什么都不写啊,是怎样的写一是怎样的,You will trip。
06:02
啊,Evil trip map evil trip map evil map,还有这个trip map等等啊,有很多啊,然后呢,在这里呢,他列举了它们的一个特点,一个是第一次构建的速度,它速度呢,一共有五个值。最快的是fastest,其次是fast中,再其次是OK,然后慢一点的话呢,叫slow,再慢一点的叫slowly。所以它的速度有有有五个,而且呢,构建呢,有第一次构建和重新构建,有两种构建速度,第一次构建呢,就是什么也没,本地啥也没有,我第一次生成那个文件,而重新构建的时候呢,可以有缓存呢,有各种方式,所以重新构建的时候还会有啊,速度还会不一样。好,然后呢,呃,还有就是它能不能用于生产环境production,如果说no的话,就是这个这个配置呢,不能用于生产环境,一旦用于生产环境呢,这个配置跟没写一样,不会会出问题。
07:01
那么yes就是可以用于生产环境,那么没有写的话呢?如果他说呢,No,那说明它可以用于开发环境。啊,然后生成的这个质量,就是这个购机后的这个代码的一个映射啊,它呢有些不同的一些情况啊,有些不同情况,以及注释信息呢,有些不同。好,所以它的值呢有很多种啊,这里我们大概可以介绍一下,呃确特点就是E呢,它会把它打包到和源代码这个搜索文件呢,会在源代码那个位置用一个一函数包裹着。啊,加了trip的话呢,它就只会构建这个每一行的关系,不会构建每一列的关系,因为代码有行和列,Trip就是便宜,就是它只关心行不关系列。啊,就是他们都包含了这些关系啊。呃,然后呢,还有什么trip这些都说了啊,Line呢就是行内啊,就是不生成单独的文件,如果没加line,没加E这些,它就会生成单独的文件啊。
08:03
大概有这些内容。好,虽然他这里写了一大堆啊,但实际开发中呢,我们根本用不了这么多啊,实际开发中我们来看文档,我们只关心两种模式,开发模式用什么,生产模式用什么就好了。开发模式呢,我们就用trip module source map,生产环模式呢,我们用map。而trip model map和map的区别就在于啊,Trip model map,它只关心行的这个映射关系,没有这个列,而呢,是既关心寒又关心链。那么因为SM既关系行用关系链,所以它打薄变译速度会更慢一点。因为它要建立行和列的关系,而上面这种的打包编译速度就更快。就这个。那么缺点就是没有列定式,所以你不知道哪一列出的错,但是因为我们代码的一般大家会符合开发规范,会进行格式化,所以每一行代码的包含量呢也不会太多,所以只要你提示了哪一行,基本上我也能找到它具体的错误位置。
09:04
所以开发的时候呢,我们不要不要不需要关心这么多啊,这样就够了,但生产模式下必须要关心列,因为生产模式下代码会进行压缩的,如果你不关心列的话,那么压缩号代码它只有一行,那么这时候提示错误,它就找不到错误位置了,所以就必须要关心行和列的位置。所以配置就是在开发模式下,我们会设置DV tool trip modu map,在生产模式下,我们会设置DV tool为map,那么这样就可以了。OK,下面我们把这个内容给加上啊。来到我们的配置DV,在模式下面加上这个啊。OK,然后呢,生产模式下加上这个map。OK,好,改了配置呢,我们要想看到效果的话呢,需要重启我们的服务器,这一点要特别注意啊,改了配置呢,我们要重启服务器才能生效,好这个时候呢,我们再看这个代码出错的位置,我们一起来查看。
10:05
刷新。好了,这时候它提示的还是这个问题啊,但是在这个右手边注意看啊,它就可以告诉你是萨JS的第二行出错了,我们点进去诶,你看它就提示了这一行出了问题。因为我们是开发模式,所以它只提示函数问题,不会提示列出问题。这是这个。那么生产模式我们也可以看一下。我们NPM软的打包。那么它就会打包输出,我们可以去运行打包输出后的文件,这个时候我们可以看看它的一个问题。这个时候呢,我们如果去看static JS下面呢,会看到诶,它生成的一个map文件啊,这个map文件呢,就会通过某种运算法啊,把它们建设他们的行和列的一个映射关系。啊,我们不关心这个文件具体内容,只要有就好了,浏览器会自动加载的。
11:03
然后呢,一旦报错呢,我们刷新诶,它就会提示这个问题啊,那么报错的时候呢,因为变量进行了压缩,所以这个变量看起来会挺奇怪,但没关系,它会告诉你具体代码出错的位置,诶是在这里提示的。你看如果之前代码还在的话呢,我们能看到完全不一样啊,在开发环境下呢,它其实是整一行出错了,你需要自己去研究是这一行哪里出错了,那么这里呢,S map呢,生产模式下呢,它会具体告诉你是哪个哪一列,哪一行哪一列出错,所以生产模式下它会更精确一点。好了,以上呢,就是这个map技术啊,它能够增强我们的这个。调试,让我们开发的时候调试更友好,同时代码打包上线,如果遇到错误,也会给我们更加精确的提示错误。这是这个东西。它的配置呢也非常简单,只需要写一个DB to为一个值就好了,那么大家只要记得开发模式下用trip model map,生产模式下用source map就够了,他们的区别就是啊,S map呢,它是有行和列的映射啊,Trip Mo s map只有行的映射。
12:14
好了,以上呢,就是source map技术,一个源代码和构建后代码映射的一个map文件的一个这样的技术。用来增强我们的开发和生产环境模式的调试。
我来说两句