00:01
接下来呢,我们进行优化代码的预习性能。首先我们来看code list代码分割。为什么呢?打包的时候,我们会将所有JS文件打包到一个文件中。那么体积会比较大。这时候如果我们只想渲染首页的话,我们希望啊,它只加载首页需要的JS文件,而不是所有文件。但是因为我们现在所有文件都在,所有JS都打包到一个文件中,所以当它加载首页的时候,它默认就把其他JS也加载进来了。这样的加载速度体积很大,速度就慢,那么性能就不好。所以我们希望呢,需要对代码进行分割,生成多个JS文件,比如说A页面呢,有A页面的JSB页面有B页面的JS,那么我渲染哪个页面就只加载某一个JS文件,那么这样的话,我们加载资源体积就小,速度就更快,从而性能就更好。
01:03
好了,那么接下来呢,我们就怎么办呢?它是什么呢?代码分割就能帮我们做这个事,它能够分割文件,将我们打包生成的文件呢进行分割,生成多个JS文件,同时实现按需加载,也就是说我们哪个页面需要用什么文件,它就自动加载什么文件就可以了,我们只要使用这个技术就可实现。好,接下来呢,我们就给大家演示代码分割,整个过程呢,会比较的。方式多样,所以我们呢,为了更好体现他们方式不同的差异呢,我们会创建新的文件夹来演示,就不在之前的脚度架中配置了。来我这里呢,创建了一个空的文件,我们就在这里去演示我们的配置。首先我们来演示方案一。那么我们要往下面的创建一些文件,创建我们之前的一些目录,比如说创建SC。
02:01
创建PB。在public,在这个DEMO1下面,然后呢,我们不考虑开发生产两种环境,我们就写一个配置文件,越简单越好,SC下面呢,我们首先研究的是多入口啊,我们创建两个文件。一个呢叫manys,里面的内容叫啥都无所谓。我们主要来研究他打包的一个情况。然后呢,我在创建一个入口文件app.js那么这里面的叫hello APP就好了。好,两个JS文件创建好了,我们还需要创建HL文件,因为未来我们要在页面上看效果呗,对吧,那么我们来创建HL文件。HP文件里面写啥东西?因为我们只需要看效果就好了。
03:03
好了,那么这个基本内容就写好了,非常简单啊,Manys就是个基本结,果然APP里也是个基本内容,HM呢,也不需要引入任何东西,因为我们会用插件自动引入,好,接下来写配置。来相当于复习一下我们配置一样,首先我们写入口文件,那么这时候入口文件有两个啊,所以entry的值就是对现了。如果你入口文件只有一个,就写字符串多个可以写成对象,左边是文件的名字,右边是我们要啊这个文件的资源地址。哎,像我们之前这样写呢,我也演示一下,当我们来看一下之前我是这样写的,SC下面的面JS。那么只有一个入口文件。
04:01
我们叫单入口。那么现在有多个入口文件,我们叫多入口。那么你可以理解为啊,就是PA呢,它同时啊会从这两个文件开始进行打包我们这个项目。然后输出。那么同样的,我们要指定这个pass输出路径,对吧,咱们来个绝路径,所以我们这里要引入。这个no的核心模块pass用来处理路径问题。好,呃,因为我目录就在外面,所以直接写就好了,然后呢,输出的file name,那么这个file name呢,我们不能直接写美女死了。因为我有两个输出文件,如果你写name me JS,那么它们都叫媒JS,那就会发生覆盖,导致我输出的文件只有一个了。那怎么取呢?中括号name就好了。
05:02
诶,这是中的一种命名方式。中框内就是以你创以这个。文件名自己去命名。什么意思呢?就是我们前面这里已经给他取了个文件名APP,所以这个文件打包出来的名字就叫APP,下面这个打包的名字叫may,如果你这里写XXS这里写YYY,那么上面这个文件打包的名字就是YS,下面这个就是YY。当这两个没有意义啊,我们一般这个APP和。那么必须要用中括号包着,要注意啊,中括号包着才行,那么这是PA中的一种命名方式,这样呢,那么上下两个文件就不会出现命名冲突这个问题了。因为只有GS,所以我们也不需要写no的,那么有H6,我们需要写一个HL的插件。
06:08
来,我们来扭点哟。OK,然后table指定它的一个目录啊,咱们以哪个文件为模板。你这个public。下面的index HL为模板创建新的文件,然后模式呢,开发生产都行。这个不重要。如果。嗯,简单一点就是生产。复杂点就是开发。好了,呃,这两个模式都无所谓啊,其实这个配置我们就已经配置好了。下面要打包之前呢,我们还要下载依赖啊,所以这里要稍微注意一下。下载一代的话呢,又得去初始化一个package文件。所以先NPM。因此Y。然后下载,我们要运行有外派还要下载。还有外派d coi要下载它的指令,那么我们在这个打包的时候还用上了这个HL这个插件,所以这个也需要下载。
07:08
下载三个。好了,那么这就是多入口啊。多入口打包,它一定会输出多个文件。我们来打包一下,那么这时候我们运行指定的,因为没有配置啊,所以是NPS派。OK,输出呢,你会发现JS呢,输出了两个app.js和魅JS输出了两个JS文件。对吧,APP里面有这个内容啊,Many有这个内容大概是这样的。所以多入口就是多输出,那么同样的道理就是,如果你再增加入口,三个入口它就会输入三个文件,四个入口输入四个文件,一个入口就只输出一个JS文件。好了,那么这是代码分割的第一个过程。多入口对应多输出,所以将来我们希望它打包生成多个文件,诶,我们一种做法就是拆成多个入口。
我来说两句