26-尚硅谷-webpack从入门到精通-懒加载和预加载

好，接下来呢，我们要学习的是叫雷loading懒加载啊。那么懒家仔了，我们来看。打开code我们来啊，是23呢的一个三吧，复制一份就好了啊。来个二四。加来自老。雷子，那叫懒加载啊，它不是说我们的之前的图片哪加载，那叫懒加载啊。我讲的是JS文件的软件在。那么这里面呢，啊，这些配置呢，我就不改了啊，就基本的配置就够了啊，不需要太多的配置OK。好，那么我们呢，主要是写JS代码，哪牛仔呢，主要是写我们自己的JS代码去做牛载。所谓的牛仔呢，我们可以啊，就是用上这个之前的这个语法去做的啊，我们把这些东西都删掉啊，我们可以打印一下。打印什么呢？打印就是DS文件被加载。

同时呢，我们也打印一下这个cat文件被加载。我们打两句话啊，代表这两个文件都被加载，那么现在呢，我明显是inds中只只有S呢，没有引啊没有引好，那如果我正常引入的话呢，那肯定是一起加载，诶比方说我们这样引吧。Import啊。我在下面赢吧。就是主要是代表呢，我先加载的是该JS，然后再加载这个TJS。啊，比方说加载的我引入里面的MU方法啊，然后呢，打印一下，我就不做更多事了，就打印一下这个方法。好那么好，那现在呢，是index呢，引入了这个MU，引入了test这个文件，Test文件里面定义的一些东西，同时打印了一句话。

啊，现在我这样写的话呢，当然我们来看效果啊。我去执行wipe。他呢，是不能做懒条仔的，现在还没做好。我们主要是运行完之后，看一下必要的这个代码啊，然后我们运行一下。先看一下我们先没做之前的效果。它呢，是打印的这些东西，说白了就是这东西全部都加载了，并没有懒得载。懒加载呢，你可以理解为延迟下载，就是它等触发了某些条件的时候才会下载，而不是一上来呢去下载。所以这儿呢，我们得写代码去修正它啊。好，那怎么办呢，怎么去做好哪加载呢，比方说啊，我们这里有个按钮。对吧，这两个按钮我们来找个按钮啊。Loading。好，找个按钮，But。

对吧，一个按钮。好，我希望点击按钮呢，去计算一些东西啊，去计算东西，那我们来看啊。我们在这里写。Get，你们班D找到这按钮。然后呢，给按钮呢，直接绑定点击事件。在事件里面呢，我们去通过M2去计算这个内容啊，去计算打印一下就打印一下ML方法。乘以个，比如说四乘以五啊四乘五。好，非常一个方法就是给按定里面。那么可以想象啊，就是我们这MMU方法呢，一上呢，是并没有什么用途的，一定是等到我点击了按钮这个时候呢，这个M方法才会才有效果，才有作用。好，但是呢，现在呢，我们来看效果啊，现在我们再构建一次。再见。好，我们再看浏览器啊，再把这个之前的该页面呢，当然我们打开的是build啊。

再把之前的B下面的页面呢打开。我们再检查。我现在还没有点按钮啊，现在还没点按钮，我们再刷新它呢，一上来呢就被加载了，你点按钮呢，的确也计算了，没问题是计算了，但是呢，问题是我这个JS文件明明一上来是不需要用的。一定是我点击按钮的时候才需要这个GS的。所以呢，我现在想做的需求就是想对这个JS文件进行懒加载，就是不要一上来就下载，而是等我点击按钮的时候才下载。那怎么做呢？哪牛仔呢，就得用上我们之前那个语法import。加的这个。隐形tes。对吧，然后呢，通过方法成功的回答中去做相应的事情。好，这就解负负值，得到这个M方法，诶，这样才行啊。那么这样呢，就变成了懒加载了。

所有懒掉粉呢，你其实会发现啊，好像跟我们之前写法没什么区别啊，的确没什么区别啊。那这种场景呢，我们是将一个将这个import语法呢，放在一个异步的一个回调函数中。哎，这样啊，就是问题就是一上来呢，这个O回调函数并不会调用。不会调用呢，那我这个JS文件呢，并不会被加载。那什么时候加载呢？等我点击了按钮，这时候呢，才会触发这个回调函数，触发回电函数呢，才会去真正的加载这个test JS这个文件。哎，这时候才会去干活。所以这时候我们再看啊，一刷新。啊，当然我得重新构建一次啊，重新构建一次，那么这里呢，也是一样的，可以通过这个方式呢。啊，修改这个构建的文件名。这值呢，就为T。好，我们构建。之前的输出呢，只有个妹，现在呢，除了个妹呢，还有个T，因为这个这个语法呢，一定会分割代码的。所以软成粉的前提条件是啊，也得是先进行代码分割。

它分割成了一个单独的JS文件，再对这个单独JS文件呢，再进行加载才行啊。好，这时候呢，我们再去运行我们那个HM页面运行。我们来看看效果啊。效果就是一上来呢，我们可以很明显看到这个T文件呢，并没有下载。只有我点击按钮的时候，诶，你看他才被加载才打赢这句话。那有同学问了，那他会不会重复加载呢？不会啊，当然加载完第一次的时候呢，第二次就会直接读取缓存，使用之前缓存下的内容，而不会重新重复的去下载同一个文件啊。所以这点呢，咱们不用担心。所以所谓呢，就是利用之前的代码分割的思啊，将代码分割的这个语法呢，放到一个异步的回调函数中。单码做这个异步的一个回调函数的一个触发条件，那么再去懒加载这个代码啊，那么这样呢，就叫做懒加载。好载，这里面的还有一个东西叫做加载。

比方说调。好，这什么意思呢，我们来看啊。再预习，再扣一次。好，创口呢，其实还是两个创口啊，没有变化好，只不过这里多了关键字叫prefetch啊，这太子文件呢，它被用上了prefet这个技术。而呢，就叫做预加载。Pre。好，我们来看看这个预加载有什么区别啊，我们再次把这页面刷新一下。刷新。好，此时呢，我们看that's work啊，其实我们这时候发现呢，T文件呢，其实已经被加载好了，你看它已经被加载好了啊T子文件。那我们在点的时候呢，它其实是读取的是之前的这个天蝎加载的缓存啊，所以呢，基本上没花多久。然后答案结果呢，也是20啊也是20。

这好像看起来效果好像是一样的，哎，这不一样的吗？你看一上来没有打印，点击之后才打印的。但是这里要特别注意，就是我们刷新的时候，一上来这个文件就被加载了。好，那么我们可以再看一下之前的写法啊，再看下之前写法，之前呢，我没加这个尾啊，我们再删掉。再看一次。这一次。刷新你看一上来是并没有加载那个T文件的。只有我点击才加载这个tests这个文件啊好，这样呢，叫做我们正常的一种加载的方式。好了，那么这里回头来预加载到底有什么区别呢？我们发现预加载呢，诶会将这个JS文件呢，会提前。会在使用之前吧。就是所谓的提前加载这个文件。载载。

好了，那么哪加载这个呢？可能大家好理解啊，需要用的才加载加载。那么预加载这个东西有啥用呢？这不就跟我之前引入这个文件，它就加载这个文件不一样的吗？对吧。哎，那不一样啊，我们再来看啊。再把这个加上。它不一样的，我们可以说一下啊，为。啊。正常加载。我们可以为，可以认为是。是并行加载。就是同一时间载多个文同载文。对吧，那么我文件越多，那么加载速度就越慢呗，就会就啊这里还涉及到很多点，就是我们同一时间呢啊，我同一时间只能请求啊，由于HP写的问题啊，只能并行加载六个文件啊等等啊，那换一个域名的话，多一个域名的话呢，又可以加载多六个文件啊，那这些呢，我们先不用操心啊，先不用管。

啊，这些是什么？HP写的东西。正常情况下它是并行下来的。也说文件资源越多的话呢，那么后面资源就得靠后加载。对吧，这是一个第二个呢啊。啊，这是这是一个最主要的问题啊，第二个呢，就是我加载的时候呢，也没有什么所谓的先后顺序啊，就是你在你就先下载。所以我这个文件如果写在前面，它就被新下载了，但是实际上呢，它可能没有用，你先下载呢，反而浪费了大量的时间。好，所以而预价才知道什么呢？的。你就认为啊，或者等。其他字眼。加载完毕，器。在啊，偷偷什么，偷偷加载资源。

哎，这样呢就比较合理了，你看像我之前正常下载呢，它是一起下单啊，管你是多是少，我全部一起下单，是这样的啊。那么这样呢，就会导致就是我们前面说的，如果这个文件前面一步一开始不需要那加载了，那就浪费时间。好，这个预加载技术呢，就是它会等啊，其他资源加载完毕，等我空闲了，诶这时候呢，我可以加载其他资源。是不是，那这样的话呢，是不是更加灵活一点呢。对啊，所以呢，同时来讲呢，你如果用哪加载可以，但哪加载有个小问题，就是一定要等你用的时候才下载。那么用的时候，如果这个文件它体积比较大，那么就要等一个一段较长的时间才会有反应，就会给用户造成了点击按钮之后有个延迟的效果。啊，就莫名其妙啊，当然第二次之后就没问题了。而这预加载的好处在于呢，就是他会偷偷的帮你加载好，等用户点击的时候啊，其实已经加载好了，但是同时呢，他又不会去阻塞其他资源的加载，它会等其他资源加载完毕。

所以这种技术啊，发明起来的，非常好用。但是它的问题就是兼容性非常差啊，那这种东西呢，我们只能啊在一些啊一些PC端的一些高本览器中使用。啊，在移动端啊，或者是咱们的IE浏览器在会有相当大的兼容性问题。啊，所以遇见的呢慎用啊，所以目前来讲哪家在基本上还行啊，遇见的呢，就一定要慎之又慎啊。好了，那么这里面呢，就是我们懒加载，哎，其实还有这个预加载功能。