00:00
好,下面有一个啊,有一个有意思的叫路由组件懒加载。啊,路由组件加载啊,这是一个什么样的概念呢?就是大家知道我们现在所有的GS都打成了一个包,对吧,或者我们自己写的JS都打成了一个包,懂不懂我们的GS呢,会越来越多怎么办?对吧,打成了一个包就说明什么,我一上来就会把我所有需要的GS是不是都加载进来,哎,现在我的这个应用有个小问题,你看。应该说回退太受不了了,我想出去,搞了半天还出去。原因是什么啊?不是这个back本身问题,是我的这种跳转的方式,它是一个push的跳转,而不是replace的跳转。
01:04
能懂我说意思不,如果push出来就是我空点点点,那它不会的,不断的往里面加。对吧,那我回头就在这边你看。是特别奇怪的一个现象,对不对。嗯,其实要做到这一点很简单啊,把这个问题先解决掉啊。就是这啊是这个吧,就这个啊,其实它有一个,它有一个属性啊,啊有个属性就叫replace。就是你是否使用replace模式去呃实现路由跳转,我们不有push replace吗?它的值是处,也就是不用写了,只要写熟悉名就可以。看到不,那也就是说加了这个以后,嗯,我们先回过去看一下啊,回过头回去一下。来看一下啊,走,我不可以这样切来切去吗?对,不记得。
02:06
就跑了。能懂不能懂啊,就这样就好了,就是我们现在啊,还回到我们刚才那说的是我们现在所有我们写的GS都是打成了一个包,就打成了一个JS文件,那我们写的代码呢,单间是我们是多路由的代码。多路由代码啊,我们有的路由,我就说这个路由是不是我刚才说的是是不是呢?就是实际上是我在需要的时候,是不是才需要创建对象,是不甚至于说我需要它,我点击选择这个路由路径的时候,我才需要它的解S都可以。现在实在是把GS一次性全部加载过来了,而我希望做到什么呢?哎,我需要的时候,哎,我一点这个你就去。
03:01
说白了是有一个,我不知道大家知不知道一个代码分割,知道吗。知道什么叫代码风格。啊,不知道啊,啊,其实就是一个什么事情,大家看呢。大家看一下我们当前的,我们当前就是现在,现在我们当前的一个包大概叫什么呢。a.GS这是我们打的包。对吧,其实这个里面包含了所有的包,包含了我们写的,以及引入了第三方的。因为现在我们是开发环境,是开发环境运行,但如果我们生产环境,那还是不太一样的。能懂我意思吧,如果生产环境,大家见过生态环境打包的产生的文件吗?它会生成好几个GM,什么build。但是也是啊,我们写的JS会单独打一个文件,我们写的所有的GS都打成一个文件,那现在呢啊,我们刚刚说过一个需求,就是我明显我开始的时候只需要这个首页。
04:10
对不,根本就不需要搜索啊,什么订单,什么个人中心对不对。能不能把他们拆开了,这个是可以做到的。也就是他所说的啊,路由懒加载。这个路由软件的前提是打包的时候就对那个进行了什么呢?代码分割所说的代码分割有一份变成了多份不分,你想想看吧,开始一个文件切切切,是不是产生了多个文件,能不能啊?看一下我们现在应该是已经生成了,看一下啊,大家看一下卡住了。那。这不吗?你看一下我们当前是不是有APP。
05:01
这个意是谁啊,这意思AP就是我们写的,我们写的所有JS在这里面啊,Manifest是谁呢?跟大家直接说一下,这个manifest是呃,外派的一些模板代码,就外派代的一些语法代码啊,下面这个谁呢?下面这个最大,这个是最大的,这个叫window啊,它实际上是我们所有我们不引入了各种各样第三方的包嘛,啊什么view,什么view root,什么view X,还有什么better等等,对吧。都打在一个包里面啊,后面呢,我们明天就会给大家去讲一下啊,这个东西到底怎么回事啊,需要跟大家讲一讲好,现在我的想法是什么,就对他进行一个什么呢。对他进行一个拆分,那关键是怎么拆了对不对,就说你拆分你按什么来拆了对吧。
06:00
诶,就有一种拆法,按路由组件来拆,比如说我把我的顶级路由,把我的一级路由拆一拆。啊,我就举搞几个就行啊,比如说来看它这个语法比较有特点。啊,看这里,我们前面呢,是这么去引入那个路由组件的,现在我们通过一个函数来引入叫什么呢。Input啊解叫input看到,但是它是个函数,看到了吗。它是一个函数。而且这里面啊,这里面来啊,我写吧,你读这个也没意思,写一下大家一看就能懂,这东西也不难。好,比如说我们就一级路由吧,搞几个试试啊大看着我。以这四个为例来,我把这四个呢给他做了。对吧,做了以后怎么写呢,看着我看着啊。
07:05
名字还是叫这个,接着我写一个,也就是说这个M是一个什么类型的值。是一个函数对不对,记住了是一个函数,而且这个函数呢,是一个返回值的。它的返回值是多少呢?就这样一个。能不能,那也就是说我开始运行这个代码的时候,我有去import这个模块吗?有没有?也就是说我从上往下去,你看到我现在配的也是配的M塞塔,记住啊,我是配的M塞的,也就是说现在这个component是个什么。它的值是不是函数?在不执行函数之前会加载那个模块吗?不会吗?你还没执行input,必须执input才会加载个模块吗?
08:05
能听到吗?嗯,来。一共四个。这文档里面也有啊,文档里面也有说明的。看到了。No。那也就是说啊,大家看现在啊,现在我。配置的这个component都是返回啊,返回什么路由组件的函数对吧,那也就是说只有执行函数的时候。才会加载。路由对不对?记住了,只有执行此函数才会加载路由。
09:02
组件对吧,那什么时候才会去执行这个函数呢?开始是不会执行的。啊,对啊,这个函数在什么时候执行,在什么请求对应的。路由路径的时候对吧。路由路径。才会什么执行,而且是第一次啊,记住了,而且是第一次,你不能每次请求都执行一遍了,那也不可能,对不对啊,肯定是第一次。那也就是说我开始只是请求外卖是吧,那也就外卖所对应的路由相关的一些GS,我是不是才会获取那别的呢?不会获取,但是有个前提,他在打包的时候就给你打成了几个包,那我们现在来看一下我们当前的情况,刷一下就知道,因为我现在已经改了嘛,你来看一下啊。
10:07
看一下我们的大概。多出来一个GS。看到吧,1.gs,这个1.g对应的是谁了,其实很简单,对应的就是我们的当前的这个首页M。认不对的是m set,大家通过这个啊,等会啊,通过这个也能看得到,我们应该是这里面有1.gs看到不好,你看啊看这里走。能不能看到,也就是说在我请求之前,这个四点键在哪里。是不是在后台呀。认不是在后台,当然这个的前提是肯定他已经在打包的时候,是不是拆分打包了。看就是三。解答,看到吗?有人说老师为什么后面的四个叉你不用管这,你管这干嘛?
11:06
这不就是个名称而已嘛,只要它的识别就行,对不对?那你说我后面再点,他会去发请求吗。会不会?当然不会的啦,你都已经有啦,还去发请求或这个东西,这是另外东西啊,这个不用管了,能看到。啊,那此时就实际上做的就是一个什么呢?啊,路由的组件缆加载。诶,有人说老师这个他们俩好像很像,哎,完全是两个等级两个级别的。这一个是缓存路由组件对象。对吧,是在浏览器端的内存里面。把组件对象缓存起来,懂我意思不?而这个路由组件拦加载什么概念,是需要的时候才去后台去请求这个路由的代码。那不懂这两码事啊。
12:05
那你说老师,那我是不是要把所有的路由组件都这么搞,其实也没有那个必要啊,没没太大的必要啊,就是大家首先要知道这个技术啊,就是有的时候有的,尤其是顶级路由组件,它的那个相关的模块比较多,懂我意思吧,相关东西多还是比较大的,所以做一下还是可以的,但并不说那些小路由组件一共就没一行代码,你也搞就是不浪费请求嘛,你想想本来他可能十行代码20行代码是吧,你也发个请求去。就没必要了嘛,对不对啊,所以相对来说比较外层的路由才会这么做啊。这是这个。能懂吧,先在理解啊,理解是最关键的,理解以后其实代码没有几下,那也就是说我们要实现路由软件的一个最关键的就是用到一个函数叫什么import。
13:08
啊import,而且这里面要注意我们这个啊,配置的这个components。我们不配,Components,配着他吧。对不?哎,我们这个名字,其实这个这个名字都写的不太好,因为我们现在都是什么,是不是都是大写的。啊,就这个。这个能懂吗?应该能懂啊。好,这样我们就跟大家去讲了,呃,另外一个技巧叫路由组件的懒加载好行。这都。
我来说两句