00:01
下面呢,我们来搭建的加速架配置。我们先搭建开发模式的配置,再搭建生产模式配置,然后呢,我们合并,最后进行优化,大概有这样四个步骤。我们先来开发模式配置。这里呢,我准备了一个空的文件夹,啥也没有,在此基础上呢,我们先来搭建开发模式。我新建一个文件夹叫conve,在这下面呢,我们来去写外派点DV,也就是说开发模式的配置文件。那么其他文件呢,咱们先不写啊,我们先把开发模式的基本内容写好,后续再把测试代码需要打包代码再引进来,然后最后再一起去运行看效果就好了。所以我们来看这个开发模式的配置。我们呢?派要求向外暴露一个对象,采用common JS的模块规范,同时这里面呢,有我们之前的五个核心概念需要配置的。
01:01
Entry入口,我们要指定一个入口文件,作为外派的一个打包的入口,那派也会从这一个文件开始构建咱们整个项目,那么入口文件呢,咱们还是叫FC下面的魅JS。好,同时我们还要指定第二个概念,叫输出output,我们要指定输出的文件去哪里,叫什么名字。那么这里呢,它需要指定一个输出的目录,现在我搭建的是开发模式啊,开发模式呢,输出目录可以是按DeFine。好,还需要指定一个file name输出的文件名,诶这呢,咱们需要指定一下我输出到sta小目录。下面的JS下面的呢name.jess。那JS呢,会以它打包的这个串的名称去自动补全名字啊,那么它决定的是入口文件的这个打包的一个目。然后因为是开发模式啊,所以咱们也没有写那个哈,可能是harsh。
02:01
除此之外呢,我们还需要决定这个串file name。如果打包的时候有多余的串,比方说我通过import动态导入的串,那么它需要通过创file name去给它命名。那么网页输出到这个JS,只是呢,我除了用你这个name以外呢,我还加个串来跟咱们入口模块进行区分。最后呢,还有一些图片啊,这些资源我们通过access module file name。来进行这个命名,那么他们呢,都说输出到这个media下面,然后呢用上这个哈希值,咱们呢,比方说短一点取十位,然后呢自动补全它的文件扩展名,然后如果有其他参数也携带上。好了,那么我们输出的内容就指定好了,指定了三个名称,一个路径,输出呢,没有输出啊,开发模式下没有输出,所以是按find file name就是入口文件打包输出的这个文件名file name的是打包设置的串啊,比方说我通过port动态导入语法,或者是not modus,他们打包的串就采用这个名字。
03:05
然后其他的图片这些资源对吧?那么采用access modify name来命名,那么因为打包没有输出啊,所以也不需要肯为true,也不需要清空,所以port配好了。接下来呢,我们要配置module,配置我们的这个load的规则,我们有需要处理什么呢?我们需要处理C文件,对吧?我们需要处理图片文件。然后呢,我们还需要处理这个JS文件。还要出H文件,但H文件不在这里处理啊。HM文件在插件里面处理,我们后续来写。我们就按照流程一点点处理。首先处理C。那么我们也想把所有C处理好,首先我们写load呢是个对象,它通过test来写一个要处理的文件的证词,咱们要处理C文件,就是点C文件结尾的文件,我们呢通过use来使用多个load对我们的这个。
04:01
呃,文件做梳理,Sal load和c load。最终效果就是它会帮我们把样式呢打包到这个,通过动态创建CE标签插入到页面上,从而生效,那么C文件不会单独打包成一个文件。然后如果要考虑兼容性问题的话呢,我们还需要用上POSCS。如果要考虑兼容性问题,Post load,那么它需要指定选项才会干活。通过options,我们指定给post传递这个option。那么在这个options里面呢,我们要做的就是指定给他添加一些插件,通过插件来指示他干活,那么插件就是POS干pre干UV。那么这是POS的一个智能预设啊,它能够去尽可能的处理我们的这个样式的金融性问题。
05:00
但是它样式兼容器到底做到什么程度,我们还需要指定一下,这里呢,我们就需要一个package dress文件来我们生成一下NPM-Y。在package Jason文件中呢?我们需要写上browse this来指定它到底。做到兼容性做到什么程度啊,比如我们比较常见就是last to version对吧,最近的两个版本同时我们呢,啊,要覆盖尽可能多的浏览器,99%啊就大于1%,就是覆盖99%浏览器,然后呢,这些浏览器中啊,如果已经有啊,发展过程中已经死了,已经两的浏览器就不需要。所以这里处理金融性啊,那么还需要。那么要配合package。
06:02
中的b this。来指定兼容性做到什么程度。好,那么这样呢,我们就处理好了这个CS文件了,那么这里大家能知道,就是我们这里呢,其实要下载一些load啊,C load post load,还有这个posts pre env都需要下载,但是咱们先不着急啊,我们后面统一的下载就好了。同意红下载,如果有什么忘记下载的,它也会报错的,我们按照提示去处理就OK了。好,接下来呢,我们样式文件呢,还有一些文件需要处理来。还有Les。Lesss呢?要做的就是在posts load的后面再加一个less load,将lesss编译成CS文件,那么后续就会处理了。那么还有萨,还有status,我们都一起处理一下。
07:03
SS呢?有两种写法,咱们都考虑一下,那么把less改成S。好,最后一个的是SIL,所以这样呢,我们就把这个。Silence这些也处理好了。OK,到此呢,我们就把样式文件呢都给处理了一下,当然包还没下,后面一起下。那么这时候我们就发现有很多重复代码,所以我们会分装一个公共的方法来去处理这些重复的代码。我们第一个函数叫get loads。对吧,获取我们style。然后呢,返回值就是个数组,数组里面放置我们需要添加的这些内容。好,但是这些内容中有个问题,就是像s load呢,他直接用就好了,但像less load的需要传less load,像S这里呢要传S,所以我们再传一个参数。
08:01
对吧,然后呢,把这个参数加进去,如果有参数呢,我就用啊,没有参数那就拉倒。OK,那么因为有可能有,有可能没有,我们把它过滤掉。因为有可能它没有传这个参数啊,所以我们filter玻璃把这里面如果是按de find的是过滤量,只保留我们需要使用的内容。那么这里呢,就是用来一个啊返回。处理样式logo的一个函数。OK,然后呢,需要用的地方呢,调用即可。对吧,像C的因为没传舱,所以是按det,我通过filter玻璃把它给过滤掉了。然后这个呢,它需要前置一个less load,所以我们需要传一个less load。好,下面呢,需要传萨斯的,以此类推,那么这样呢,我们代码的复用性就更好一点。看起来也简洁多了。所以大家在写代码的时候,如果发现有重复的地方啊,那么应该尽可能想办法去复用。
09:02
好,那么样式处理好了,图片我们也可以处理。呃,图片的话呢,我们需要test一个正则来处理我们想要的图片。JPG或者jpeg。或者是PNG,或者是GF,当然VP什么SVG都可以。好了,那么他通过使用type asset,使用wepa中的专门用来处理这些普通资源这种方式去处理。下面呢,还要对图片呢做一步优化,那么就是将这个小于,比方说10KB以下图片,我们转换成BASE64,那么这样的话呢,咱们的图片体积会更小一点。配置方式呢,就是pass。那就指定u will condition。
10:04
然后指定我们处理的这个大小为10KB,十呢就是十乘以1024,那么这就是10KB对吧?我们对图片呢,也做了这些小小的优化,当它小于十小当于10KB以下的时候呢,它会转换成贝四格式的一个方式图片,那么这样的会减小请求数量。缺点就是体积会变得稍大一点,但是因为10KB,它就最多增加12KB,所以也还好。OK,那么我们其实还可以处理其他资源。对吧,我们处理其他资源呢,我们就是TS,比如说自己图标。那么我们同样的写正则有WF。二还有就是这个ttf的,当然还有MP4MP3这些啊,那么那些资源开发都非常少见,所以咱们这里就不做处理了。
11:01
那么这些资源呢,通过派的这个resource处理就好了。那么resource和这个access access和。As resource的区别就是。呢,它可以。即转备44好,30呢是原封波动输出。所以这是它们的区别。好了,那么这里呢,其他资源都处理好了,那么下面还处理JS,处理JS呢,我们需要用两个东西,一个是E对咱们JS代码进行检查,一是对咱们JS代码呢进行转换。那么如果先处理ES的话,我们需要下载并引入一些插件。哎,这里呢,我们先引入插件吧。下载了,我们后面一起下。那么因为我没有下载这个包啊,所以写代码的时候它没有提示。
12:02
好了,这个插件呢,我们已经引入了,那么下面我们去处理。New调用这个插件,所有插件引入之后都是new调用,在这里我们可以插入一些插件的一些选项来指示他干一些活。那么yes is的话呢,我们需要指定的是contest,它呢是要处理的哪些文件范围对吧?那么。这里要用上文件的绝路径,所以我们又得引入no的一个核心模块,叫pass,专门用来处理咱们的路径问题。OK,当前文件夹的文的目的,上一级的SC就是他要处理的。同时,我们还可以通过包含或者排除法来指定。它的一个处理范围。
13:01
对吧,排除note不处理,这样呢,我们可以限定范围更小,从而处理文件更少,从而性能更好。同时我们也可以进行缓存。让他呢可以有缓存,这样呢会更好一点。这样能让第二次打包更好。那么我们也得用这个方法。Gun on your name。然后呢,我们处理的这个目录的话呢,就设定在这个not。一个专门放缓存的幽默啊,叫cash,然后在这里面放入我们的yes in cash的配置。好了,那么yes呢,就主要有这些了,当然我们后面还配置过多进程打包,但是咱们这里。定义脚手架的时候,我们一开始就不考虑多进程打包,在说到多进程打包的时候,我们前面也说过,就是进程的开销,它启动和这个通信都是有开销的,而且开销相对来讲是比较大的。
14:03
在我们处理的代码量比较少的时候,如果你用上那个技术的话,会极大的增长,延长咱们的这个啊打包的时间,这样呢反而得不偿失呢,所以我们建议就是当你觉得你这个项目中打包速度比较慢的时候,你再考虑启用这多金的打包,前后对比一下,看下打包速度有没有啊提升,如果有的话你就保留,如果没有的话,那说明你的代码还是不够大啊,那么还是要等待时机。所以咱们这里呢,代码量测试的时候会代码量比较少,所以咱们就不用这个多进程打包了。好,Yes in呢,光这些配置还不够啊,还需要一个配置文件来指定PA这个yes it到底干什么事?所以我们还需要在最外面呢新建一个点e in rcds文件。那么这个呢,是yes it的配置文件,通过配置文件呢,我们可以指定这个E到底该做什么事。好,这个配置文件呢,会比较复杂,所以建议大家去我的官方文档中去复制一下。
15:06
给大家复制一下。好,那么这个配置呢,和我们之前是不太一样的啊,因为我们现在搭建的是RI脚手架,所以我这里继承的是官方脚手架的配置。这样呢,会更符合我们的开发习惯,开发习惯。同时也继承这个配置的话呢,它会有一些报错啊,所以我们这里又通过配置啊,解决了一些匿名报错问题。OK,知道这个就好了,那么这个配置呢,能复制就复制,那么将来我们去定义配置的话,也基本上就是能够去借鉴别人的。那么如果有自己的规则,就在这里面继续写rules来符合它的规则就好了。但是一般来讲,官方的位置就足够好用了,所以我们直接使用即可。好了,到这里呢,我们就完成了这个的配置了。E的整个配置呢,会比较麻烦啊,所以大家一定要仔细认真写好。
16:04
下面我们还有BABAB的是通过一个load的处理,首先我们要告诉他处理哪些文件啊。帮忙处理JS文件。但是这里要特别注意的就是将来我们使用,诶,包括上面这里啊。将来我们使用这个re打包的时候啊,它会出现的文件除了有JS,还有SX语法,所以这两种语法咱们都要处理。要稍微注意一下,JS是我们普通的JS模块,GSS呢很有可能是将来我们开发的S的组件,那么这两种语法都要经过B编译浏览器才能识别,所以我们要对这两种语法都要做处理。然后呢,为了使它的这个处理范围更少,我们可以用include或者是include都行。我们只处理这个SC目录下面的资源。对吧,然后呢,使用什么load呢,当然是。
17:01
同时为了提升它的性能呢,我们可以去给它进行压缩,对吧。让它体积啊,开启缓存,让它这个第二次打包更快,但缓存的叫cash directory。稍微不太一样,然后呢,缓存的内容呢,不要压缩啊,这样呢它就不会去做压缩,这样呢我们打包的速度还能再快一点。OK,那么同样是这样设置那么多进程呢,我们首先还是一样不再考虑啊。好了,这个BB配置就。基本上完成。当然呢,B也是需要一个配置文件来指示它到底干了啥事,所以我们还需要定一个叫b con的文件。在这里面呢,我们也是向外包的一个对象,诶只是这个代配置呢,会比较简单一点,我们可以直接写,他要无非就是设置一个预设,当然这个预设呢,我们用的是APP这个预设。
18:02
一样的,我们要编译的是rest语法,所以要去使用rest的这个预设才能编译。OK就可以了,那么之前呢,我们在处理这个BA的时候,我们还考虑过这个金融新问题用的cos,那么现在我们就不需要考虑了,因为这个RAAPP呢,它包含了这些配置。而且之前呢,我们为了减少bab打包体积的大小,还有那个插件。叫什么runtime的一个插件,对吧,那么现在也不用了,因为这个预设全都内置了。那么这个预设呢,全都内置了,到底内置了啥呢?我们怎么去看呢?诶,这时候我们可以去大家搜一下。我们可以去get up上去搜一下。这个预设呢,是叫BB pres。Go。
19:04
那么这里就会有它的一个配置了,我们看看能不能找到啊。呃,是re团队的这个预设在这里我们搜不到,但是我们可以这样搜搜create APP。然后在这里面呢,点开。有个page在这里面有个b reet。APP啊,因为这是RA脚手架的这个,他们用的这个配置,所以我们就看这个就好了,其中create这里面呢,就包含了它所有的配置。在这里面呢,我们往下走一走,我们能看到它呢,里面就包含了doubleb pre inv来编译一些yesl的其他语法,同时给pre inv的配置的靠S的配置,所以一些啊基本语法都能编译,然后用了所以的一些JS语法也能得到编译,同时它使用的一些插件。这个插件里面呢,就包含了我们之前遇到这个插件。
20:02
I pluging transform runtime这个插件,它就能够帮我们把这个辅助代码变成只有一个文件,从这个文件中引入,从而呢,每个文件就没有服务代码,所以这样的话呢,体积更小。OK,他全都弄好了,所以咱们就不需要操心了,感兴趣大家可以看一下。那么它是加BB。Precise。APP。好,那么这里呢,我们就配置好了bab,而且配置好的babible呢,它不单能处理好JS语法的一些金容性问题等等啊,还能够编译JSS语法,所以JS语法的配置呢,就这么简单,我们只要用上咱们re官方的这个BA预设,那么它自然就能够编译我们的re s语法了。OK,到这里呢,我们还有最后一个资源需要处理,就是HL资源。来。
21:00
引入H秒。HM资源处理的方式呢,也非常简单啊,我们要做的就是以我们现在的HM文件为模板,创建新的HM文件,这里呢需要指定一个table。那么我们将来的模板呢?自然不用多说,必然是在那个public下面的名字叫index秒。好了,那么这样呢,就把这个文件给处理好了。HV文件也处理好了,那么接下来呢,我们还有一些小的细节需要调整。我们需要设置模式对吧,是咱们的开发模式,同时呢,为了开发模式下的这个调试更加友好,我们可以设置DB tool。We trip module map。
22:05
好,同时呢,为了打包的体积啊,不要打包到一个文件中,把它分成多个串,我们还需要配置optimization。Page split t。创。那么这样呢,它就会进行代码分割了,对吧?主要分割的是我们no里面代码,以及我们通过import动态导入的一些语法,那么代码分割的话呢,可能会导致缓存失效,所以我们还可以配置一个runtime track。在这里面呢,我们去对它进行命名。命名的方式呢,我们就叫runtime。然后呢,再加上后面的你这个entry point。Dig。
23:02
这样呢,我们就把time文件的名字呢,也给命名了一下。OK,那么到这里呢,我们就基本上处理好了我们的这个。基本配置它呢,能够处理好我们的样式。资源,能够处理好我们的图片资源,其字体、图标等其他资源,还有JS资源以及资源,我们都做了处理。那么以及呢,我们增强了调试设置的模式压缩,以及最后呢,我们为了调试更加的方便,也说我们去开发模式下更加方便,我们还需要最后一个自动化配置d server。那么DV solo呢?我们需要指定的是它的一个域名。方口号。是否自动打开浏览器?对吧。那么这样呢就可以了,同时为了让开发模式性能更好,O hot为出开启热模块,听话。
24:08
好了,那么这里的配置呢,我们就基本完成了,当然了还有一些小的配置呢,我们待会儿要继续加上去,但是这以上呢,就是我们前面学习过的一些配置。只是我们对BA和E的配置呢,做了一些稍微的修改,但是其他内容都是我们前面基础高级作战的内容。所以这块内容大家应该要比较的熟悉。那么后续我们还需要继续追加配置,让我们脚手架的性能更好。以及功能更加强大。
我来说两句