00:01
下面我们来学习prepach的优化。首先,为什么?我们前面已经做过代码分割。同时会使用import语法来进行代码的按需加载。比方说路由哪加载呢?这就是按需加载的一种用法。那么这个时候呢,有个问题,就是它按需加载,一上来是不加载的,当我点击的时候,或者是当我去访问的时候,它才会加载。那么如果拆出来的这个串口体积很大的话,他访问的时候才加载的话,那么用户会感觉到一些明显的卡顿效果。所以这样的会给用户体验会稍差。我们想怎么样呢?我们想如果浏览器把所有资源都请求完了,此时浏览器没事干了,也说浏览器的空隙时间。我希望它能够加载后续的去将要使用的资源。那么这个时候我们就会以用上这个preload或者技术。
01:00
和pre呢,它们的意思都是让浏览器呢,偷偷的加载未来要使用的资源。不同的是是立即加载。优先级高,Pre是空闲时加载,优先级比较低。他们的共同点都是只加载不执行,资源一定要到你具体使用的时候才会去调用,它只是把资源提前加载进来,然后使用缓存把它缓存起来,当你未来用的时候会立马加载,立马使用,所以后面在访问的时候速度很快。那么他们的区别就是prolo游戏机高,Presh游戏机低,那么lo呢,只能加载当前页面需要用的,既可以加载当前页面用的,也可以加载下一个页面要用的。是这样的,所以一旦加载下个页面用的的话呢,那么你跳转到下个页面,这个资源会被消失啊取消。而是下个页面可以直接使用缓存的,是这样的。所以这就是因为他们这样的一个区别啊,所以当前应用面如果有优先级高的资源,建议用pronote下载。
02:05
大学页面如果没有,那就无所谓了。但是下一个页面如果有需要用的资源呢,我们建议用pre下载。那么与此同时,他们都存在一个问题,就是兼容性比较差。我们可以去一个著名的网站叫can use,这个网站呢专门查询前端HLSJS他们的一些API的金融性问题。我们可以打开这个网站去看一下。在这个网站上呢,我们直接搜我们需要用的这个测试的技术,要是。那么在这里他就会列举他的一个集中性问题。红色代表完全不兼容,绿色是代表完全兼容,黄色是存在兼容性问题,勉强能使用。红色自然就不能用啊,那么红色这里标的绿色的呢,意思就是我们要开启浏览器的一个特性,那么这个功能才能用。那么在这个右上角这里,他大概说了一下,它的一个覆盖率呢,达到92%。
03:02
还好啊,还好,但不能说特别好,只能说还好。那么它的问题就在于pro IE完全不兼容。虽然现在IE已经不多了,但是完全不兼容,这种情况呢,对于很多公司来讲是不能接受的。好了,那么还有prefetch。呢?它的兼容性更差,只有达到79%。但是IE11能兼容,但是在sa这里兼容性很差,它需要设置开启一个实验性特性。那么正常人都不会看啊,所以。这个等于等于没配置一样。所以这一块呢,就是咱们的这个。呃,兼容性啊,就是这样的,如果你真的勉强想使用,建议你使用prono。对吧,的兼容性会更差一点。好,嗯,他们那些概念介绍完了,那么下面他们用起来复不复杂呢?诶,其实很简单啊,我们可以打开一个网站叫NPM。
04:01
这个网站呢,专门搜索通过NPM下的那些包的情况,这样呢就搜索不到一些其他莫名其妙资源。我们在这里可以搜一个。啊,它有一个的一个插件。那么这是六团队研发的一个pro的插件,其实社区中呢,其实之前有其他的一些人员研发的,但是他们已经放弃维护了,所以我们现在主要用它,它就可以帮我们去。自动的将资源呢变成prelo或者是pre的方式,我们要做的就是给它啊注释,我们是要用prelo还是pre技术,通过re来指定pre还是prolo,它就会达到这个效果了。OK,那下面就会告诉你怎么用,首先我们先把这个插件下载。下载完成之后呢,我们把插件引进来。嗯,这里他下载错了,因为下载的是I view的这个这个技术。
05:06
它这个提示的这个包呢,有点问题啊,是I view这个技术,那么引入的时候也是要引入这个it的这个包。他这个文档有点小问题。好,当然我们名字还是叫这个名字啊,最后呢,就是new调用,在new调用的时候,我们会以传if prolo as free标签,那么这个是咱们的这个preload的用法啊,Pre没有这种用法。我往下放啊。这个意思就是咱们的JS呢,采用PLO的方式下载,然后呢,作为free标签的一个优先级去做。如果我们希望游戏级最高可以作为style啊,它游戏最高,但是这样呢,它的这个文件解析就会出问题,我们呢就script就好了。好,这时候我们去打包这个资源啊。我们可以看一下咱们的这个JS。
06:01
数据标签的一个资源情况。好稍等,等他打包完成,我们就可以看D怎么下面输出的这个资源情况了。打不成功来到H文件中啊,我这里把它格式化一下,不然的话我们不太好观察咱们的一个资源情况。OK,这时候我们可以发现啊,咱们的这个后面需要加载资源,注意入口文件它永远都是直接引入的,它不可能下面这种引入就是我们后面才需要用的东西呢,它才会这样做啊,你看它就变成了PLO的技术作为一个标签。这就是他对这个JS做了一个pre的处理。那么如果你想用pre的话,很简单。直接I I pre。那么呃,Prefer呢,就没有这个S标签的用法,所以直接re e fl,我写错了。
07:00
Are you。Pre就可以了。那么他们加载优先级呢,不太一样,其他的没什么区别。那么这样的好处就是它会偷偷的加载这个资源。我们先看一下效果。来这里呢,我就不可视化了。我们可以看见这个标签。它是作为free。那么这个技术呢,就是我们打开页面,它会在浏览器。空闲的时候偷偷的把这个加载资源加载回来。我们看到这个mass创啊。那么它的priorityity呢?它的一个权重啊是最低的,Novel是最低的。它就是等浏览器最空闲的时候,所以我们也看到这个资源是在比较靠后的时候才会去加载。在浏览器真的是没事干了,那么它就会偷偷加载这个资源,那么这个好处就是当我们再去点击去使用这个资源的时候,那么它会立马的使用这个的缓存,那么加载速度比起你重新加载速度那是快非常非常多的。
08:07
所以这样呢,可以让用户需要用上后面资源的时候呢,这个用户体验会变得很好。所以这些prolo或者是技术,它都可以对后面资源进行操作啊,提前加载,从而让后面访问用户体验更好。那么从到点上来讲呢,其实是prono pret这种技术呢,是更符合开发的需求的。因为我们希望他最后再偷偷加载,但问题就是它兼容性问题比较严重啊,所以大家在使用这个技术的时候要斟酌一下。
我来说两句