Vue.js如何实现路由懒加载浅析

一、Vue.js如何实现路由懒加载浅析

1、懒加载也就是延迟加载，不知道大家在工作中有没有发现，当你的SPA（单页应用程序）变得复杂时，打包构建后的Javascript包会变得非常大，以至于严重影响页面的加载时间。幸运的是：vue-router支持WebPack内置的异步模块加载系统。所以，那些使用较少的路由组件不必打包进bundles里，只需要在路由被访问时按需加载。话不多说了，来一起看看详细的实现过程：

2、import MainPage from'./routes/MainPage.vue'

3、import OtherMassivePage from'./routes/OtherMassivePage.vue'

4、{ path:'/main', component: MainPage},

5、{ path:'/other', component: OtherMassivePage}

6、简单来说，你可以使用require.ensure来替代import。它能帮你将OtherMassivePage组件以及该组件的所有依赖分割到一个单独的chunk中去。

7、现在重启你的应用，你会发现并没有什么改变。但，当你打开开发人员工具，选择检查网络，再一次访问/other路径时，你会看到一个新的文件被加载进来。

8、import MainPage from'./routes/MainPage.vue'

9、const OtherMassivePage= r=> require.ensure([],()=> r(require('./routes/OtherMassivePage.vue')))

10、{ path:'/main', component: MainPage},

11、{ path:'/other', component: OtherMassivePage}

12、是的，这看起来是有点奇怪，相信我，它并不是那么糟糕。

13、还有一种方法是将路由对应的组件定义成异步组件。

14、const OtherMassivePage= resolve=>{

15、//空数组用来指定该路由组件需要加载的依赖

16、 resolve(require('./routes/OtherMassivePage.vue'))

17、不过，你最好不要使用这种包裹起来的写法，因为WebPack会使用静态分析来检测和分割块。比较好的做法是，将他们写成一行以减少空间的占用。

18、有时候我们想把某个路由下的所有组件都打包在同个异步 chunk中。只需要给 chunk命名，提供require.ensure第三个参数作为 chunk的名称：

19、//这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件

20、const OtherMassivePage= r=> require.ensure([],()=> r(require('./routes/OtherMassivePage.vue')),'big-pages')

21、const WeightLossPage= r=> require.ensure([],()=> r(require('./routes/WeightLossPage.vue')),'big-pages')

22、不像许多其他的WebPack任务，这个方法出乎意料的简单，并且能产生意想不到的有用结果。如果你正在维护那些变得臃肿不堪的大型单页应用，我会毫不犹豫的将这种方法推荐给你。

二、pdf.js怎么实现懒加载

实现PDF.js的懒加载，通常基于HTML的特性，而不是PDF.js本身。PDF是一个独立的文件，读取整个文件内容一次性完成，无法通过分页读取。然而，分页渲染是可行的。

由于HTML文档与其图片资源并非同一文件，支持分开请求并控制何时请求及显示内容。因此，HTML的懒加载机制适用于图片，但直接应用于PDF文件的懒加载并不适用。

为了在PDF.js中实现类似懒加载的效果，可以采用以下策略：

1.首先加载PDF文件的基本信息，如总页数等，这可以在加载PDF文件时进行。

2.当用户滚动到特定页面时，再请求并加载该页的内容。通过监听滚动事件，可以实现动态加载。

3.使用Promise或async/await进行异步加载，确保页面在加载其他内容时不会阻塞，提供流畅的用户体验。

4.利用canvas元素在后台进行页面渲染，仅当用户需要查看某页时才进行渲染，减少内存占用。

5.优化加载策略，比如通过缓存机制预加载可能需要的页面，或利用资源预加载技术提高加载速度。

通过这些策略，虽然不能直接实现PDF.js的懒加载，但可以模拟类似的效果，提升用户体验和性能。

三、H5页面如何实现图片懒加载

1、图片懒加载，往往作为减少首页白屏时间的一个解决方案而出现。直观的来说，就是不要直接加载所有图片，而是满足一定条件后才加载，也就是”惰性加载“。实现图片懒加载的方式有很多，如果要简单点那就直接使用第三方插件：vue-lazyload，如果想探究一下别人的插件是怎么实现图片懒加载的，那么可以看看本文是如何实现的。

2、实现图片懒加载我们需要先明白具体的场景，一般来说，我们会在首屏先加载几张图片，其他的图片则先不加载，在页面滚动时，图片快出现在视窗中的时候才来加载图片。为什么要这么实现呢，因为对于图片很多的场景，如果一次性加载出所有的图片，可能会导致页面白屏时间比较长，特别是图片比较大的时候。

3、使用data-*自定义数据属性给img标签新增一个data-src属性

4、全局监听滚动事件，使用节流处理回调函数

5、在回调函数中，判断图片是否已经出现在可视区域，如果已经出现在可视区域，则加载该图片

6、页面初始化的时候执行一下回调函数，保证首屏有图片显示

7、在这个实现过程中，涉及一些知识点，我们来快速回顾一下：

8、data-*是可自定义数据属性的属性，可用在所有的HTML元素上面，嵌入自定义的数据内容。这些自定义的数据可以在HTMMLElement.dataset中被访问到，例如：

9、我们实现图片懒加载的最终目的，就是在恰当的时候使用data-src的值替换到src，加载真实的图片。data-*定义的数据不仅可以在js中访问，也可以在CSS中访问，具体可参考：dataset

10、Element.getBoundingClientRect()方法会返回一个DOMRect对象，其包含了当前元素的大小，以及相对于视窗的位置信息。听名字可能会有点迷糊，但是结合图来看就比较好理解了：

11、DOMRect对象中的width和height是包含了元素的padding和border-width，其位置信息指的是包含元素的最小矩形的每条边距离视窗原点(0,0)的位置。

12、由于我们会全局监听scroll滚动事件，如果每次滚动都触发回调函数的话会造成不必要的计算成本，因此我们考虑使用节流来处理滚动事件。节流的具体细节就不在此重复，我们先简单实现一个节流：

13、有几个很相似的”height“，我们就简单都梳理一下：

14、window.innerHeight：浏览器可视区域的高度；如果有水平滚动条，也会包含滚动条高度

15、window.outerHeight：获取整个浏览器的高度

16、Element.scrollHeight：元素内容的高度，包括由于溢出导致隐藏的内容高度

17、Element.clientHeight：元素内部的高度，包含内边距，但不包括水平滚动条、边框、外边距

18、这里我们使用innerHeight即可，因为我们是在window对象上监听scroll滚动事件。

19、准备工作已经完毕，接下来就直接上手代码。

20、代码中都有相应的注释，在了解上面的准备知识后，代码就挺简单的了：

21、首先我们会默认加载三张图片，查看元素节点，这三张图片的data-src都没有，而另外没有加载的图片是有data-src的。

22、滚动时会触发图片加载的回调函数，DOM树也会跟着改变

23、所有图片都将只有src，没有data-src。

24、本文通过监听滚动事件，在图片出现在可视区域前才加载真正的图片，如果未出现则使用默认的loading图片的方式实现了图片懒加载。一般来说，loading图片都会比较小，而实际的图片会大很，因此使用loading图片来代替是可以减少图片渲染时间的。