你好，我是李艺。
上节课我们学习了如何使用Performance面板和Memory面板以辅助定位代码的性能问题，这节课我们学习使用JavaScript Profiler面板以及静态依赖分析工具。
先看一下问题，微信小程序的代码包大小额度是有限的，有些文件，如果是这个项目里边实际上没有用到，这个开发者工具在编译的时候会自动帮助我们过滤，这是一种静态依赖的分析机制，当我们在微信开发者工具里面进行模拟器预览的时候或者是真机调试的时候，都可以看到已过滤多少文件这样的一个提示，便是静态依赖分析工具在发挥作用了，下面我们看这个项目实践。
首先看实践一：使用JavaScript Profiler面板查看JS代码的一个执行瓶颈。
这个面板它更直观，使用起来也更加的方便，如果调试区默认没有显示这个面板，我们还可以在调试区右上角有一个更多菜单，在那个地方可以开启，在面板里面它色块的宽度代表代码执行占用的时间，上下并排显示是这个函数调用栈的一个调用记录，如果色块它很窄，基本上就说明没有什么问题，说明JS它在执行的时候很快就执行完了；如果这个色块它比较宽甚至这个颜色它是红色的，比较靓丽，说明这个地方可能会存在隐患，我们需要多加注意。
在我们这个项目诊断里面有一个叫做dealWithListData这样的方法，它的执行大概用了10ms，这个执行时间基本上是ok的不算是耗时，一般而言我们在30以下甚至40以下基本上都不会有问题，当执行时间达到了60 70 80甚至100以上，这个时候就需要引起我们的重视了。我们从dealWithListData色块我们可以单击进去还可以跳转到对应的Sources面板，可以查看源码，这种调试方式方便我们定位出现性能瓶颈的代码在哪里，比这个Performance面板更加的直接，微信开发者工具在这个远程真机调试模式下也有这个Memory还有这个JavaScript Profiler，这些面板都存在，使用方式是类似的，下面我们看代码演示。
下面我们看实践一的代码演示。
这个面板默认的情况下可能没有开启，我们可以选择调试区的这个地方有一个更多菜单，选择它的More tools，然后在这个地方我们可以选择JavaScript Profiler单击它就可以启动了，启动以后我们可以开启录制，然后我们可以进行一些操作，比如说我们在这个地方进行页面的一些滑动，让它加载更多页的一个数据，当我们感觉可以的时候 我们就单击停止，停止以后我们可以看到这个地方它是有一个有一个分析结果出来的，我们可以选中某一部分然后进行放大，然后查看它具体的一个执行代码，比如在这个地方我们可以滑动操控板，可以进一步地将面板进行放大，上面这个我们可以查看它的执行信息，单击错了，单击到里面去了，我们可以再恢复一下，鼠标然后浮到这个上面，它其实就可以显示执行时间了，我们可以看到执行时间是142.5ms，在这个里面我们还可以看到具体的里面的函数名称，比如在这个地方我们刚才提到了dealWithListData也在这个地方，我们可以单击这个色块，单击这色块以后 它就可以跳转到我们指定的源码里面，这个就是我们代码里面源码对吧，如果是我们在面板里面感觉到某一块执行它比较耗时的话可以单击进去看它的一个表现
目前我们看一下我们秒表组件是使用哪个组件来运行的，看一眼是使用nw，我们单击秒表组件让它运行，再单击录制，然后停止 这个也停止，然后再查看数据，看一下秒表组件它的一个执行情况是不是很顺畅，总体而言这个地方它没有出现红色的倒三角，整体而言还是可以的，我们可以展开看它里面的具体的一个执行情况，像这有一个convertTimeStampToString，这个地方我们看到它执行时间是8.5ms，这个时间是相当短的，总体上时间总耗时大概也就是在Total Time等于8.5 这个时间还可以，我们可以选择相对长一点的，比如在这个地方，这个时间是大概是67点ms，这个是在42.5ms，这个面板我们前面提到了它的一个最主要的作用就是我们可以通过这个地方色块可以单击，去到我们Sources面板，可以查看我们的项目的对应的代码，更加方便我们去定位我们代码里边可能出现的一些问题，代码演示我们就说到这里。
下面我们看实践二：通过静态依赖分析工具查看代码包的大小。
这个工具可以在文档管理器里面打开，可以很直观地看出各个主包以及分包的一个大小，还有它们里边的组成，每个代码包里面体积较大的文件，占用的区域的面积也大，一眼我们就可以看出来，谁是我们代码包变大的一个罪魁祸首，从我们目前的项目的静态依赖分析结果来看，主包里面有四张静态的商品图片，占据了很大一部分，主包的代码包额度主要是被它们给浪费的，这一块稍后我们还要进行优化。
下面我们进行实践二的代码演示。
打开我们小程序的项目，调试区现在不需要可以关掉，打开静态依赖分析工具有两个途径，第一个途径就是在我们文档管理器这个地方，这地方有一个按钮可以单击以后就可以打开，我们就可以看到分析结果了，这个里边主包这个地方我们可以看到主包下面有goods4.png，这个文件大概是256KB对吧，它相当大 ，还有goods3 goods1，这些它区块最大，说明它们占用的在代码包里面占用的大小比重也是最大的，这个地方还可以刷新，刷新以后看刷新之后的一个结果，这是一个地方，另外还有一个地方就是在我们这个项目的详情面板里边，这地方在本地代码 后面有一个代码依赖分析，通过这个也可以打开这个工具，有时候我们会将这个标签页关掉，关掉以后我们可以通过这个文档管理器里面有一个类型，我们可以选择这个类型，随便切换一下这个类型就可以重新将这个标签页打开了，另外这个地方我们还可以看到它里面有一个无依赖文件，这个地方就是已经列出来了，在我们项目里面通过静态依赖分析，然后查出来的无依赖文件，基本上这些文件一般情况下我们可以删除的，排除在我们代码包的打包范围之外，代码演示我们就说到这里。
下面我们看实践三：使用packOptions.ignore选项忽略或者是添加目录。
这个项目大了以后有很多目录是小程序项目不需要打包的，这些目录或者是文件可以通过项目配置文件里面的一个叫做packOptions.ignore这样的一个配置节点把它们给忽略掉，有一些miniprogram目录下的一些文件，如果这个小程序它没有真实用到，在打包的时候也会被自动忽略，在使用静态依赖工具分析的时候，我们可以看到有哪些文件被忽略了，当我们需要将某些文件在这个项目里面动态使用的时候，还可以通过include配置节点将这些文件特意给它添加进去，下面我们看代码演示。
现在我们看一下实践三的代码演示。
首先我们看一下我们的最终的配置完成以后的配置文件里面的字段长什么样子，选择我们7.2.3的实例包，然后选择我们的项目配置文件，在这个地方我们可以看到这有一个packOptions这样的一个配置节点，整个这都属于它配置节点，然后我们可以把配置节点给它拷贝一下到我们目前的目录下面，在这个地方打开这个项目配置文件，可以将配置节点拷贝在这个地方，在这个里边它自动给我们删掉了，为啥自动把我们删掉了，它有些不太老实，这种情况将我们的小程序项目给它关掉，先把它关掉避免受它影响，关掉以后 然后我们把这个节点重新再拷贝进来，然后我们现在就可以审视一下我们这里面这些节点了。
它这每一个ignore的节点有两个字段，一个是value 一个是type，type有两个类型 一个是folder，一个是file，folder file，如果是folder的话，上面这个就是一个目录，如果是file就是单个的文件，在我们这个项目里面，我们看一下miniprogram里面的node_modules，这个目录是显然是不需要的，因为它是我们Node.js本身的，就是下载的模块所在的目录，当然这个目录其实我们也不要额外地去设置，因为本身微信开发者工具它在打包的时候这个目录它也不会打包。
还有像go_stopwatch在我们的当前的目录下，它也不需要 所以也可以忽略掉。还有server tools这些目录，我们现在tools目录还没有，但是如果写到这个地方其实也是可以的，还有在我们的这个文件里面可以复制出来一个，在我们这个项目里边有一些组件，index_addons里面就有很多这样组件，我们目前代码里面用到的是nw组件，如果是有组件我们不需要的话，比如说像stopwatch_go，如果我们不需要的话，我们可以在这个地方然后进行忽略的一个处理，这样就可以了，这个就是一个目录 然后将这个给它忽略，另外它有一个include，就是我们故意要将某些文件或者是目录给它添加进来，以防止被自动忽略，可以写到这个下面，语法跟上面也是类似的，改完以后我们就可以再次重新打开我们这个项目了，代码演示我们就说到这里。
最后总结一下，这一讲与上一讲所了解的性能分析工具都是为开发者服务的，在这个软件自测的时候，如果感觉某些操作比较卡顿，从代码上又看不出问题出现在哪里，这个时候我们就可以使用这些工具分析一下 查看分析结果，可以帮助我们找出真正的症结所在，启动性能也可以通过上面的工具进行分析，尤其是Profermance面板还有这个JavaScript Profiler面板，可以查看启动过程当中有哪些步骤，它浪费的时间较多，执行的时间较长，这节课我们就讲到这里。上面显示的这些网址是本课所涉及的文档地址。
点击查看开放文档：
这节课我们学习使用了JavaScript Profiler面板以及静态依赖分析工具，下节课我们学习断点调试，还有是关于Source Map和真机调试2.0功能的一些介绍。
最后看一下思考题，这里有个问题请你思考一下，在小程序项目开发里面，大多数一般问题，我们都可以直观地通过日志打印的这样的一种方式进行观察，当有错误发生的时候，我们可以很快地判断出来大概是哪里代码出现了问题并着手解决，但是有一些问题它比较棘手和隐蔽，它们的出现是违背我们目前对这个项目的认知的，俗话说反对自己是最难的，自己用心写出来Bug也是最难发现的，在这种情况下 我们应该如何快速地突破困境找到解决问题的关键矛盾，这个问题留给你思考一下，下节课我们一起来深入探讨一下。
