00:01
上节呢,我们一起给大家介绍了生产模式的一些准备工作啊,这节课呢,我们要去进行生产模式的一些配置。我们呢,首先来处理C文件,CS文件目前存在一个问题,就是它打包到GS里面了,它是先加载JS文件,再去创建style标签,生成样式,这样来讲,对网站来讲,它会出现闪屏现象,用户体验会不太好。闪屏现象什么意思呢?我们可以演示一下。我们已经打包输出的资源。我们右键在open server。我们把。把这个控台network调成一个慢一点的,慢的三句我们刷新一下。首先一上来呢,他会先解析HL代码,那么解析HL代码呢,会把所有结构渲染上去,此时你会发现下面div什么也没有。什么样式也没有,原因就是因为它现在还在解析JS,而样式是JS解析完之后再创建style标签,再插入到页面上的后面才去解析样式的,所以一上来的页面是空白的,基本上啥也没有。
01:08
那么突然一闪,诶,出来了这个效果,这就叫闪屏现象。那么这种闪屏现象对于用户体验来讲是非常不好的,我们开发中是要杜绝这种现象。所以我们应该做什么呢?我们应该单独打包生成C文件,然后通过link标签引入,这样呢就没有闪避现象,性能才会好。OK,所以接下来呢,我们就来做这个事,我们需要把CS文件呢,提取成一个单独的文件,这样呢我们才能通过link标签去引入。那么要做这个需要用的一个插件叫minis这个插件。当然这个插件我们也是在外派官网上找到的。呃,我们来搜索外派官网,那当然我这里已经有历史记录了。我们找到插件这里面,在这里面呢,它有介绍这个。处理样式的。
02:01
我们在这里能找到啊,就是这个插件,这个插件呢,就是WIFI5中啊,新创建的插件,用来专门去提取CS成单独文件。作坊呢,就是首先安装这个插件,我们按照教程一点走。安装插件。OK,其他的我就关闭了。安装完之后呢,往下走,我们需要引入这个插件,插件都需要引入。好,特别需要注意的是,我们需要将之前的dial改成了这个mini s这个插件的这个load。需要特别注意啊,不能再用styleo,因为style load会动态创建style标签,不需要用了这个load呢,它才会把CS文件提取成单独的一个文件,所以我们要把之前写这个。呃,写这个style的地方全都改成这个。大家注意它不是字符串啊,它是一个load,它这个load呢,才会提取CS。
03:02
成单独的文件。所以我们需要把所有用到style的地方都改成它。OK,那么就改好了,当然光这些还不够啊,最后呢,插件还需要在new调用一次才行。插件还需要在下面用调用,那么最终我们这个提取就成功了。好,我们之前打包的是没有CS的,现在我们再打包一次NPM软Bill的,通过上节课配置的指令,我们就可以看效果了。OK,打包输出之后呢,你会发现啊,这个地层下面多了一个文件叫many。他打包的时候会默认把所有CS文件合并成一个文件,所以这里面会有我们写的所有样式文件。那么问题来了,这个CS文件呢,我们希望他去static里面目录里面去啊,所以这时候我们可以指定。
04:04
这个file name。哎,去哪里呢?去这个static。下面的。C。然后呢,它叫什么名字呢?就叫面,你写吧,我们可以这样取。这样呢,我们再次打包啊,那么它就会提取到这个static里面去了。对吧,这里面有个many。那么我们最终打开页面访问一下,诶,效果还是没有问题的,这时候呢,即使你把网速再调慢,它也不会有我们所谓的那个闪屏现象。刷新它是一上来呢,样式压根没有,它是一上来最多是个白屏,然后诶你看我再怎么刷新啊,它这个样式效果呢,是没有任何变化的。对吧,不会一闪一闪,所以这是link标签引入的好处啊。那么我们也可以通过月经检查,也可以看到咱们的这个样式呢,是通过link引入的,你看。那么它为什么通过link引入呢?这个就要说到之前的HL插件了,HL插件会自动引入我们这个。
05:07
咱们的这个。打包生成的资源。包括前面的JS,包括现在的样式,所以用上那个插件我们就完成了。OK,那么这里面呢,我们就是做好了这个提取三成单独文件的一个操作啊。
我来说两句