00:01
下面我们来完成这个inline。We。那么在完成之前呢,我们还是要介绍一下它的功能。我们是先小一点的JS文件。由速率标签引入的方式变成一个行内速率标签。那么我们想针对的文件呢?主要有runtime的文件。所以此时呢,我们先得打包生成,让太门接,这样呢,它我们接下来才能操作它。那么要打包生成runtime文件呢?我们需要在这里配置optimization。Three。我们要进行代码分割。同时,我们还要定义这个状态的理解。定义它的一个输出命名方式。
01:02
OK,我们命名的方式就叫runtime,然后呢,一个分隔符加上它的一个名字。H imports这样的一个JS文件。好了,这样呢,我们去打包NPSIPA。OK,打包成功的话,我们在第三步就能发现有一个runtime键。好了,那么下面我们就要将这个run态模件呢,变成一个行内的错误标签。我们看怎么办?我们先定义一个插件叫。We like。OK,我们在这里去完成,那么里面代码怎么写呢?我们借鉴HL外派给我们提供的代码模板,在这里它有一个代码模板,我们直接复制啊。我们上面这个不需要了,只要复制下面这个。
02:03
在这里呢,我们需要通过一个save require去引入这个HL这个插件,所以这个包呢需要下载。然后呢,同时我们再把这个插件的名字改成我们自己的名字,英兰trunk。好包下载好了,那么我们一点一点来分析啊,首先呢,在compiler whose comp,我们去注册一个这个whose,在这个whoses里面呢,我们去想办法得到HTML wiin的一个。护士。获取好之后呢,我们要做的就是注册HL WiFi发给你的独有的户。Host,那么注册的hosts呢,叫我们来复制啊叫。
03:05
Autoes Tech groups。注册好之后呢,我们想办法要做的事就是从这个里面将。这个标签。里面的这个runtime。变成想要变成阴错表现。所以下面我们来做,所以第一步呢,这里已经得到了这个护。通过HL WiFi发的GA whoses传当咱们当前的comp得到的就是HL WiFi发的whoses。然后通过这个裤子咱们就可以注册了。我们注册的这个户口呢,叫做这个名字alet。Talk groups,那么他介绍的参数是个对象啊,我们通过tab注册就好,因为咱们这里目前不需要用上这个异步操作。
04:03
好了,那么这里他接受的参数呢,是所有的一些资源。其实你如果结构的话,能得到的就是一个。Head。和body。其实就是两个东西。我们可以打印一下。Head body,其他的呢,不需要。OK,那么我们想要打印的话呢,我们还需要。呃,把这个插件呢用一下,不然的话呢,是没有效果的。我们需要在WiFi这里。去。应用这个差距。OK,在下面呢,我们去用调用。好,这时候我们去打包。
05:01
那么打包输出呢,还没有做好,我们提醒观察一下这个两个打包的内容。好了,第一个呢,打印的是这个头部的task,第二个打印的是body璃task,那么body璃默认没有啊,所以它这里是空的是对的啊,头步task呢,它这在有两个标签我们来看啊,一个是SC是many run time这个文件,一个是many JS,那么第为处就是他们的一个属性啊。然后我们什么也没写的话呢,就是他们就是一个粗略标签,因为它和name的这个标记,它是粗略标签,什么都没写,他们就是外部链接啊,链接写S啊,它就是一个外部链接这样一个速率标签。然后呢,嗯,Meta就是这个Meta这个没什么改的。好了,那么这个就是咱们的一个内容,我们现在呢,就需要将这个给改了啊,我们来看现在是什么样子。把这个复制一个。
06:00
目前他长的样子是这个样子。OK,当然我这里就只保留一份了,咱们就不多写了。目前需要这个样子,我们希望修改为什么样子呢?修改为这个样子。怎么把它变成一个行内的这个。什么标签呢?把diff typec这些去掉。我们要设置的无非就是这个。Inner。这个Meta可以保留啊,我差这个都无所谓,我们要写的是这个音呢。H。那么这样他就知道啊,原来你要注入东西,这就是你要注入这个runtime文集的内容。然后呢,我们还可以写一个。TT就是是个闭合标签的意思啊。我们要把上面这个内容,诶,变成下面这个东西。
07:00
Meta写不写都没关系啊,主要是写这三个。只要变成这个样子,它就能从一个外部链接变成一个应该一个Q标签。好,我们来操作一下,看怎么操作,因为我们可能不太清楚这个数据到底是在head还是玻璃中,所以我们两方面都要处理,你不能只处理head的,也可能要处理玻璃,所以这两块呢,我们都处理一下。而且我们定义一个方法去专门处理,这样呢我就好去服用了。这叫get in line。给你来唱吧。OK。那么这里呢,我们要做的就是对这个head tag呢进行重新复制。对吧,那么要重新赋值的话呢,咱们这里还是得手动的改它啊。不然的话呢,这个重新复制是不成功的,我们要对这个assets head pass进行重新复制,复制为一个新的内容,那么我们通过这个方法去把这个新内容进行处理。
08:02
唱这个head。同时咱们的Bo也是通过这个东西去处理。好了,那么这样呢,就通过这个方法去获取,对这里面内容进行处理就好了。所以最终这一块我们的内容呢,这一块就不需要做了,而是放到这个get in my里面去完成。好了,他接收到的一个参数呢,就是我们的所有的task。对吧,我们接下来要做的就是便利。注意啊,我们这里因为没有引入样式,所以没看到将来可能这里还有style标签这些东西,我们要处理的是JS标签。所以首先我们。呃,便利这个task。因为里面有多个内容嘛,咱们先遍历,遍历的话呢,我们判断。
09:01
如果他name不等于script,那就直接退出。就原封不动啊。啊,咱们这里得用个map方法去处理啊,因为我们最终外面要使用的,所以我们这里要return对它进行处理,如果你不等于script,那就原封不动的退出。好,那么接下来往下走,就说明它是一个速度标签,我们接下来还要判断。它到它上面的这个获取它这个SC啊,咱们的这个file的一个文件路径。等于这个tag上面的attributes。上面的这个SC。对吧,然后我们要想办法判断这个值啊,是不是属于runtime这个文件。所以接下来继续判断。获取这个文件资源路径。OK,如果他连这个文件资源路径都没有,那直接什么也不用处理了。
10:09
说明你本来就是一个行内script script,所以不用管。好,那么来到下面呢,我们就要进行处理了,我们要判断这个内容有没有包含我们写的东西。所以我们这里要定一个正则,当然我就简单直接写了。我就通过一个正则去判断啊,判断它里面有没有包含状态。啊,只要你包含状态,不管你是前面还是后面包含了,那么都行,对吧,是这样两个状time文件就好了。当然你写复杂一点,你可以点心啊,然后后面点JS,因为中间可以是任意的内容,后面的是点S就好了。这样的一个结尾的一个文件,那么我们就可以认为它是符合我们写的规则的。我们去检测这个pass。如果为触。
11:03
对吧,那么说明OK,如果为false。那么说明他不不满足我们的条件啊,我们直接return。好,那么来到下面呢,说明它全都满足条件,所以我们就要一个这样的对象。呃,Close t呢为处,这是没问题的,但是问题是这个文件内容我们怎么获取呢?我们怎么获取这个runtime这个内容呢?哎,这个时候我们就用上这个comp中的access,所有资源呢,都在这个comp的access里面,我们要把这个东西重过来。所有资源都在这里面传就好了。呃,传access啊,我们传这个资源就好。这里面有所有的资源。那么我们只要去这个access里面去找找这个pass的资源,诶,它自然就能找到,找到之后就用so方法。
12:04
那么这样就可以得到这个源代码。OK,这样呢,我们就把这个处理好了。我们去这个head里面去,遍地去,玻璃里面都遍地。便利之后呢,要把这个数据返回,要覆盖掉它之前的配置。编辑的时候就要判断啊,如果它的思入标签,它不是思入标签,说明它是个style这些东西,那么直接return,不用处理好,那么是的话呢,我们接下来再获取这个文件路径,如果文件路径都没有说明它是个行内的数据标签,那就不需要处理了,直接return。好,如果来下面说明你不是个含的,那么再判断这个pass里面包不包含run time这些东西,包含了那就没关系,那我就要处理不包含,继续return。那么呢,最后呢,说明你呃是我们这个time这个文件,所以我们把它变成一个行内的方式就好了,而行内方式呢,我们要去原资源这里去找到这个源代码,作为这个in的HL的值。
13:03
诶,这样呢,我们就把这个in chnk派给做完了。下面我们打包。OK,打包成功啊,这个时候呢,输出它还会输出这个runtime文件,这是对的,因为我们只是把在HL中把它变成一个赖文件,我们并没有在wepad中把这个资源给删掉,所以它现在输出还是对的。呃,但是我们可以看这个index。我们可以格式化一下。因为现在可能不太好观察,可是画像发现这里有一个赖的思路标签,诶,这个就是那个runtime的那个文件,那么我们看到这里只引入many,没有再引入runtime。所以time文件已经内置到我们这个速度标签了,当然页面还是正常运行的。好了,那么这里呢,就是我们这个配置啊,当然配置的最后呢,我们还需要想办法删除。
14:02
最后一步。删除。删除这个我们要处理的这个状态文件,对吧?好呃,我们要删除的话呢,怎么删呢来。我们可以在他处理完之后,其实你要做做的话呢,在这里处理,在这里处理也可以。因为这里已经处理好了啊,当然我们如果想解耦的话,就是不想他一一个东西干太多事的话,我们会继续做。这时候呢,我们注册另外一个公司叫after。这个是在它输出之后,我们在这里去注册这个钩子。好,注册钩子的话呢,我们看能得到什么参数啊,我们看一下文档。Afterit的参数里面呢,有这个output name和这两个都没什么用啊。没什么用,我们可以通过compil中的access去便利。
15:06
OK,那么还是一样啊,它这里面是一个对象,所以没法便利我们通过object case。提取它上面的所有属性进行辨定,For each。得到一个pass。我们判断这个pass符不符合我们这个正则的规则。对,当然这个政策规则我们后面要去处理啊。如果它呃符合的话,不符合,那就什么也不用做啊,如果它符合的话,我们就需要把这个字给删掉。删除的方式就是delete这个,加上这个fire pass就可以了。如果他符合把这个资源删掉,不符合那就拉倒。好了,那么这样呢,就把这个资源删掉了,我们一起看NPS。好了,诶,你看输出的资源就没有这个资源了,所以这样呢,我们就完成了这个对runtime的一个稳健的一个应赖的一个操作,这样的话呢,可以减少请求数量,从而提升咱们性能。
16:09
呃,最后呢,就是因为我们将来可能不只让time件需要提取成阴,我们希望其他文件也希望提取成一个奶。那么这个时候我们把这个政策拿出去啊。我们应该希望外面去配置。对吧,你给我船舱。数组里面呢,可以放N个正子,你想对谁处理就对谁处理。我们希望通过配置的方式让它变得自由度更高一点。那它自由度变得更高一点,不至于就是太就是只能处理一个文件,比如说将来还有别的文件,我会继续加,所以我整成个数组。那么传达选项的话呢,那么我们这里需要接收它。我们就叫测试test,因为有多个test。好,那么这里的验证呢,就应该从这里走啊,这里是个数组啊,我们应该遍历数组中的每一个正则去匹配,只要有一个匹配上了,我们就要去删除,所以这里的判断规则可以这写test。
17:11
点some,只要有一个满足咱们就可以了,好,其中的一个位置就是test,通过test去test。通过这个正则去匹配这个,只要有一个满足,那么我们就可以去,呃。开启删除。那么下面这里也是一样,只要有一个满足,他就那个啥。他只要如果都不是,那么就return它就好。OK,我们最后呢,再打发一下。发布成功输出的文件中呢,没有这个runtime文件,同时在这里面我们找一下,它会有个行内的控率标签。然后我们再运行代码还是OK的。好了,到这里呢,我们就给大家分装好了串外派,那么优点就是可以减少请求数量。
我来说两句