00:02
接下来,我们来实现按需加载,动态导入。我们设想这样的一个场景。页面上呢,我们有一个按钮。点击它需要执行一段计算操作。那么不体积,他这个计算当然就不执行。那么对于整个页面来讲。一上来这个按钮并没有点击,所以这个JS它其实没有执行。而是当你点击的时候它才需要执行的,是这样的。所以对于页面来讲呢,一上来是不是可以不要加载它要执执行的这个JS文件呢,而是在你点击的时候再加载呢,这样性能是不是好一点呢?因为页面有很多资源需要加载,有图片啊,有样式,有GS,如果你在这里加载的这个JS文件可以,但是它有可能会阻塞其他资源的加载。如果我一上来不加载这个JA,那我其他资源就有更多时间更快的去加载,那么能够让我们首页渲染速度更快。
01:04
所以这里我们想解决的痛点就是,如果页面上有一些一上来用不上的资源,我能不能不要一上来就加载?哎,下面我们就来做这个事。打开代码呢,我们把代码的东西复制一份啊,来个代三,我们来演示这个例子。OK,那么怎么演示呢?我们再定一个新的文件,比如说看DJS。八。好,这里我就定义这个函数,同时我在命中把它引进来。但在APP中也行啊,这里我们随便挑一种方式就好了。这时候我们去点击计算,那么要点击计算的话呢,我们需要给页面准备一个能点的按钮。
02:10
好,这时候呢,我们就可以去点击了document.get ID,我们找到这个按钮再说,然后呢,在on click。这时候我们打印这个。Count。啊,减几无所谓啊,我们主要是研究这个,现在呢,我还没有实现啊,所以此时我们去打包我们来看啊。打包的时候呢,同样的我们需要把依赖下载一下。然后打包NPS。好,打包成功的话呢,它呢,输出的还是之前的那三个文件没有变化。然后呢,运行的时候呢,一上来呢,这三个文件全部都加载了。通过network查看啊,一刷新就会看到这三个JS文件,一下就加载了,点击点击点击并没有加载新的文件,当减的功能是有的。
03:09
原因是因为呢,我们这样写的话呢,这个mass这个counts呢,它会被打包到这个。魅jes里面去功能呢,最终打包到魅JS里面了,它直接就会,呃,我们看啊,直接就看到这个结果了。直接就在这里看到结果了,所以它并不是按需加载的。好,我们想实现的就是一上来不加载它,等我点击到再加载,那怎么办呢。我们一起来看怎么做啊。首先这里我们就不能这样引入了,我们得用一种特殊的引入方式,叫import的动态导入。动态导入语法呢有个特点,它会将动态导入的文件。
04:06
啊,拆分成一个单独的模块。这是代码分割。拆分人当的模块嘛。单独加载,然后呢,在需要使的时候自动加载。是这样的,我们要做的就是对我们的这个mass这个抗呢进行。这个port动态导入,它返回值是一个promise对象啊,所以我们会点灯点catch。登方法呢,就是这个模块下载成功了。K方法,那就是模块加载失败了。那么我们可以打印。RS,然后呢,说模块加载成功了。
05:03
那么catch就是模块下载失败,那一般来讲是不会出现失败的。那么失败的错误原因呢?就在这啊。好,下面我们来一起看啊,一起看。首先,第一个能观察到的地方就是。我们重新打包的时候。它会输出两个JS文件。一个是我们之前的那个公共模块。咱们的这个ma DS,一个就是我们最新的这个count DS,剩下两个因为是多入口,所以它一定有输出。好,然后呢,当我们去运行这个页面。它移上来只会加载通过network,然后刷新页面啊,移上来只加载三个JS没问题,还是之前那三个,其中这个对应的是那个JS。
06:03
好,点击按钮的时候,诶,你看它在加载这个。实现所谓的按序加载,诶,现在就成了,并且点击的时候它会答应模块检测成功,那么模块因为是默认报组啊,所以需要点default default才是对应的那个报的函数。所以如果我们想要预习这个运算减法的话呢,我们得res.default这个default就是他报的内容。啊,得这样写才行。好,改代码呢,需要重新打包啊。OK,然后呢,我们刷新,我们点击点击点击啊,你看它这个减法的值就出来了。好了,那么这里呢,就是这个按需加载的方式,需要用上动态导入语法,那么它自己回去把文件呢,分割成单独文件,同时在需要使用的时候自动加载。所以这样呢就能满足我们需求,一上来不加载它,而是在需要使用的时再动态加载,这样呢会让我们首页渲染速度能更快。
我来说两句