00:02
最后呢,我们来对我们的原来脚车架配置呢,做一些优化和调整。原因就是最近呢,我们经常遇到同学们去开发后台管理的一些项目。而且呢,他经常会使用上一个SD的UI库。那么在进行使用SUI库的时候呢,我们往往要进行一些配置。哎,接下来我们再学习这个配置该怎么办啊。好,那么首先呢,我们先用一下啊,你。来,首先去下载。下载完之后呢,我们去在面JS中需要引入R3的样式文件。它的样式文件呢,在第一次打包目录中有啊unde design。是一个C文件啊,这里是引入氨例三的所有样式文件,引入之后呢,我们就会用上面的组件了。来,我们随便用一下,我们可以直接引入,我们就用一个最简单的,不需要搞得太复杂。
01:03
我们用上面的一个按钮路径。来,在这里加一个按钮就好了。它可以通过type来指定它的一个类型,比如说primary就是个经典的按钮。好,下面我们启动我们代码。OK,稍等我们就能看到效果了。OK,那么这个按钮呢,就整上去了,你看就在这。当然阿呢还提供了很多很多其他组件,这里我们就不一演示了啊,那么在开发的时候呢,我们可能会有这样的问题,就是阿迪的主题色呢,是个蓝色的,但是我们公司可能是个绿色的,是个黄色的,或者是其他颜色的一个主题色,所以我想一键替换掉咱们的这个安例赞中的UI库中的主题色。
02:00
那么这就叫氨基氮中的自定义主题。那么我们来到官方文档中啊,其实它这里在开始使用的时候,在这个create APP中使用的时候,它这里有提示啊,高级配置里面的自定义主题可以怎么做。但是我们用的是自己的脚手架,所以配置呢会稍微有些不一样,我们接下来来做啊,总而言之,这里借助的就是要去改这个less的load的一个选项。因为氨例三中呢,它是使用less去写这个样式的,同时里面主题色呢是通过less变量去做的,那么这里呢,就是去改less的选项,就是要改less文件中的某一个变量,把它的值改成另外一个颜色,那么这样的s design中的这些组件的主题色就会全部发生变化。OK,那么我们把这个复制一下,我们要做的就在这儿做就好了。来到这里我们要判断就是传过来的这个pre啊,它是不是let load,是let load的话呢,需要给他传一些选项,所以这里我们要做个处理啊。
03:07
首先pre要存在,存在的情况下呢,我们还要去对它做处理啊。我们因为要传选项,所以我们要写成对象形式load啊,你之前是你是啥还是啥load这个不变,然后关键是options有没有啊,这个就要看pre,如果等等于less not,那么就要就要生效。好,如果你是next load,我需要传个选项给你,如果不是next load的话呢,传个空对象就好了。好了,那么你是let not,那么我们要传什么选项呢?在这里它其实已经有了,我们就复制粘贴就好了。他这里呢,就是给less load呢,传了一个less option选项啊,去改了这个主题色,改成一个这个颜色就这个。就够了。所以这里呢,就是on design自定义主题配置。如果你将来需要改主题色啊,那么就可以像我这样去修改。
04:04
OK,然后其他主题色呢,它在这里有个配置主题的文档,如果你感兴趣的话,可以往下走一走啊。来,订在这里。那么这里呢,就是它可以改出提色的,左边是它的K,右边是它的默认值,你想改就直接把它值给改了就好了。好,我们就不易研究了啊好,改了主题色呢,我们可以最后呢啊,这里还有一个地方需要修改。因为它改的是less的变量,那么也就意味着我们要用的样式呢,得是less文件的样式,而不能是surface,所以这里一定要用上less的样式,On less的一个样式,这一点大家需要注意一下,因为很多同学呢,就是在这里忘记改了,导致这个自定义主题不生效。好改好之后呢,我们要重新打包一下才行啊。
05:06
OK,那么等到他打包成功,我们看一下最终successful。OK,然后呢,诶,你看这个按钮的颜色就变了,变成主题色是绿色的。好了,这里呢,就是我们的这个安利赞的一个。主自力主题的一个改法,那么将来就是要去改less option的一个选项,对吧?首先些呢,这个选项有没有?诶,有的话我把它列成一个对象形式,同时呢,Load你是啥还是啥,只是options要做处理options如果你是less load,我就要加上less load配置,不是less load就给我一通对象就完事了。好了,那么这是自定义主题的一个配置啊。那么最后呢,我们还可以对我们的打包的内容呢进行优化。我们来对代码呢进行打包,看一下效果啊。NPM软必要的。现在打包呢,有一个不太好的点,就是它会把no里面代码呢打包成一个文件。
06:07
那么也就是说这个多就包含了RA red啊,Design do等一系列的库,所以整个打包体积就会比较大。来啊,我们来看一下打包生成的这个资源的一个情况啊,看JS这样我们就看了。OK啊,这里面呢,有些资源我们一起来分析一下,魅JS就是我们主要的文件啊,我们主要的APPJS啊,魅JS这些文件都在这让time呢,就是我们那个打包提取出来的一些哈希值的一个文件啊。然后呢,Home就是home组件,About就是about组件,因为我们通过import这个动态加载的方式,所以他们进行了单独打包,那么还有一个文件呢,这个是这个就是所有not wall就打包到这个这个文件中,Re do RO do and design等等就打包到这个文件中,那么这个文件打包体积就会比较大。
07:00
你看它有190多KB,而其他文件都相对来讲比较小一点,它的文题体积比较大,而随着我们开发中运用什么一叉用各种包啊,那么它的库的体积会越来越大,越来越大,这样的话呢,会导致我们每次加载的时候,加载这个JS文件速度比较慢,从而让页面加载性能不好。所以我们可以对这个not文件再进行处理,我们怎么处理呢?我们来到这个串,在这里我们来手动调整它打包的一个开组。我们调整了cash group。我们希望什么呢?我们希望做到的就是它打包的这个文件不要这么大,所以我们可以把model models一些比较大的代码呢,给抽取成单独的模块进行单独打包,那么比较大的模块,比方说有RA相关的。当然,如果不可能把M这些库都单独打包,这样的文请求数量又太多了,所以我们希望将RO啊啊一起打包。
08:09
成一个JS文件,那么这个文件呢,它也不会太大对吧,那么也可以减少我们那个所有的文件大小。还有可以加氨基三蛋打包。对吧,因为安第三呢,它用了很多很多UI组件啊,所以也会比较大,所以它也可以单独打包。那么剩下的no莫再单独打包。那么大概就是这样的一个思路。这样呢,就会以让我们这个文件更小,更小,那么怎么做呢?我们来配置配置。比方说我们先考虑这个RA相关的,我们的取名字就叫RA,那么我们通过一个test来告诉他我们要检测什么样的文件,对吧?来自于no modus,下面我们可以先写啊,No modus。
09:06
对吧,下面的是不是RA,那么这个呢,当然需要转移处理。然后呢,它也有可能是这样的一个斜杠,就是它可能是法斜杠,也可能这个斜杠,所以这里面呢,我们可以用个中括号代表它这两种都行,对吧,然后前面呢,也是以斜杠开头。那么RA呢,它可能是RA,也可能是red,也可能是red red,那我管你是啥点心啊,你是啥东行啊,你有或者没有我都能支持。对吧,那么这样去打包就可以了,然后剩下呢,也是加上这个斜杠,当然不加也OK啊,加上也OK啊。那么这样呢,就是专门处理相关的po。好,那么打包的时候呢,我们需要指定一个。包名我们就叫T下面的RA吧,就叫这个。
10:03
好,那么我们还需要指定什么呢?指定一个打包的优先级,打包的权重,打包的群众呢?必然要比这个not Mo要更高,因为如果比not model低的话,它就会优先把所有的东西都打包到model了,那么这个就不适合它的文件了,所以它的权重必须要比not更高。通过priority。我们来增加它权重,比如说三十四十都行,把权重调高一点,OK,那么这一个就配置好了,那么按第三个呢,也是如此啊and。那么这里呢,就改成an TD就好了,那么an TD的后面没有这么多有的没的,所以这一块给去掉了。OK,那么打包的名字呢,就叫NTD,群众的话呢,比如说30。OK,然后最后一个呢是notes,它呢进行单独打包。摩托的话呢,我们就叫力吧,不需要叫别的,把这些包。
11:01
来,也这样写。唱个leap。LIS吧,因为有很多包啊,然后呢,这里面就写no MOS这个。配置就好了,他权重一定要是比他们都低的。OK,那么这样就可以了,这样呢,我们再打包看一下效果啊,那么它就会多打包出来两个文件,一个是RA相关的会打包的一个,一个是按打包的会单独一个,那么剩下的如果还有的话,会打包到这个lips里面。这样的话呢,就不会让这个整个文件这个体积变得更大啊,那么我们看到它打包出来的这个RA,打包出来的这个按,当然还有一些lips,它会再单独的一起啊,就这个这样的话呢,会让我们这些文件的体积会变得小那么一些些,不至于太大。所以这个优化的思路就是这样的,就是如果我们开发中发现一些比较大的一些库的话,我们可以通过这个speed把它单独打包,这样呢我们从而好实现这个按需加载,或者是说就是并行加载,从而让它速度更快。
12:12
那么到底大还是或者是小,对吧?那么你可以自行去分辨一下对吧,你可以先观察你项目中用的依赖,然后再去再去实际。当然了,如果你还有其他的,还可继续增加啊,这并不是最终的完美方案,最终方案还是要根据你项目的实际用的依赖的情况来决定,到底有没有什么东西需要单独打包,这样呢会更好,但是思路呢就是这样。我们一定要打包的时候要考虑,第一个它的确体积比较大,第二个呢,我们还要考虑请求数量不要太多啊,不要为了啊这个打包,我拆了个几百个这个模块,那就没必要了。所以这些方面都要综合考虑,最终达到一种平衡。好了,以上呢就是我们的一些调整,我们教会大家在安赞中自定义主题的配置可以怎么做,以及将来还有什么优化手段,最终呢,打包的时候啊,它这个打包速度呢,它每次都会进行性能分析,提示你什么什么文件体积太大了啊,这个呢,其实我们并不想并不想看,我们会通过performance为for。
13:17
这样的打包的时候,它就不会进行性能分析,不会提示这些东西,那么从而让打包速度能够再快一点点,所以这里呢,可以提升一点点打包速度啊。关闭性能分析,提升打包速度。好了,以上呢,就是我们最后对咱们的配置做了一些优化和调整的地方。那么相信大家今后呢,放到你的项目角度下,诶,你也有思路去修改里面的配置,或者是对它进行优化了。好了,下面同学们自己尝试写一写吧。
我来说两句