Vue懒加载

Posted 2021-04-16 前端配送站

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue懒加载相关的知识，希望对你有一定的参考价值。

一、前言

1.web现状分析

很多页面，内容很丰富，页面很长，图片较多（例如各种商城页面，图片资源数量多且可能较大）。据统计：图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。所以要是页面载入时一次性将资源加载完毕，所花的时间对用户来说可以先去喝一杯82年的"java"了。懒加载就是图片优化的手段之一。

2.什么是懒加载？

懒加载也就是延迟加载。即在需要的时候进行加载，随用随载。

图片懒加载：

原理：当访问一个页面的时候，先把img元素或是其他元素的背景图片设为同一张图片（空白图片，PS：也可说是占位图, 只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。

优点：能够防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

所以懒加载通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载（如果把滚轴迅速的往下拉的时候，可能会看到图片加载的情况）。这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。

类似技术方案，还有预加载：

预加载会提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

优点：图片预先加载到浏览器中，它保证了图片快速、无缝地发布，使用户浏览网站内容时能得到最快的反映。

两种技术在本质上来看，行为是相反的，一个是提前加载，一个是迟缓加载甚至不加载。懒加载对服务器有一定的缓解压力的作用，预加载则会增加服务器前端压力，使用上当然是根据场景来选择了。

二、Vue实现懒加载

现在回到小编的编码日常中，我们会通过Vue写一些单页应用，而其中通常会引入很多路由。一个普通的Vue单页应用项目，如果需要加载的内容过多，直接去使用webpack去打包，打包后的javascript包体积会非常的大，导致进入首页的时间会非常长，首屏加载时可能会出长时间的白屏现象，即使加了Loading，等待时间较长的话，用户体验终归是很不友好的。而且很多情况下用户可能没有通过点击，跳转到其他的页面，而只是在主页面进行了停留，那么我们就没有必要把其他页面的资源全部加载过来，而是等到用户点进去再加载。这种情况下懒加载的思路也就同样适用了。

Vue的路由懒加载就是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件。

1、import/require对比

原来我们项目中使用比较多的方法是import引入，它是ES6的语法，import会被转化为CommonJS格式或者是AMD格式。通过import来引入组件模块和CommonJS的同步语法是一样的，即

import home from './home' 等价于 var home = require('./home')。

webpack中可以使用 require.ensure()来实现代码打包分离，但是在vue中已经被import所替代，这里不在过多介绍了。node编程中最重要的思想就是模块化，import和require都是被模块化所使用。

但是import和require也存在一些区别：

2、Vue-Router路由懒加载实现

实现路由懒加载步骤很简单，就是利用Vue的异步组件和webpack的代码分割。懒加载时可以写AMD格式的require回调语法，修改router的index.js文件的写法如下:

import Vue from 'vue'
import Router from 'vue-router'

//懒加载
//@代表当前src目录，不用import引入
const home = resolve => require(['@/components/home'], resolve)
const second = resolve => require(['@/components/second'], resolve)

Vue.use(Router)
const routes = [ 
  { path:'/home',  component: home },
  { path:'/second',component: second }
 ] 
 //创建router 对路由进行管理
 const router = new VueRouter({ 
   routes 
 })  
 export default router;

这里引入了home和second两个路由组件，它们会被分别打包，如果在require里写了多个模块，那么这些模块都会被打包成一个文件。

直接这样写webpack打包时会使用id作为chunkFileName，如果想在network里面看到动态加载的组件名字，要在webpack.base.conf.js文件里的output中的filename下面加上chunkFileName。

output: {
    path: _dirname+'/dist/page',
    filename: '[name].js',
    chunkFilename: '[name]-chunk.[chunkhash:12].js', //此处配置打包的名称
    publicPath: '/dist/page'
  }

配置好之后运行项目，打开network并刷新，我们会发现加载了一个home-chunk.de2bc0e7d19a.js文件，而在点击second路由标签后会加载second-chunk.e029eadce404.js文件。也就是根据路由切换，js会按需加载进来，这就是路由懒加载的简单使用。首次需要用到组件时浏览器会发送请求加载组件，加载后会缓存起来，以便再次用到该组件时调用，所以不用担心多次进出同一个异步加载页面会进行多次加载。

3、在懒加载中提升用户体验

讲到这里可以说懒加载的实现，依赖webpack下AMD模式require函数的功能，将异步require的文件生成一个独立的js文件，调用时异步下载这个js且在完成后再执行它。

但是站在用户的角度，有个问题是我们不能忽视的，即从用户点击页面某个路由标签开始，到js文件下载完毕并执行，这期间有一定时间的延迟，延迟时间受js文件大小或网速等原因的影响有可能几毫秒，几秒甚至十几秒。用户在这期间面对的就是没有任何反应的页面，这会让他们感觉自己点击无效，常会重复再次点击。因此，在这个过程中添加一个Loading的加载提示就显得很有必要。所以可以为vue-router懒加载时下载js的过程中添加Loading提示，避免页面无响应的问题。

我们分析这行代码：resolve => require(['../components/home'], resolve) 它是一个函数，执行了require的过程，完成后再调用resolve回调函数。我们只要封装一下，在require执行之前显示Loading，然后在加载完成执行回调的时候隐藏Loading，也就实现这个需求了。

const home = {
  path: '/home',
  component: resolve => {
    //TODO: 显示Loading
    require(['../components/home'], component => {
      //TODO: 隐藏Loading
      resolve(component)
    })
  }
};

四、总结

在Vue项目中运用懒加载避免了进入首页一次性加载过多资源而造成用时过长的问题，可以有效地分担首页所承担的加载压力,大大减少首页加载用时，通过按需加载可节省流量，合理化引入资源，进而提升用户的体验度。使用中其实还有很多地方可以去思考和探究，例如使用时我们可以考虑用户对组件的使用频率，在项目中区分可懒加载组件与非懒加载组件，分别进行管理，像使用频率较高且打包后文件较大的组件我们可以进行懒加载处理。

懒加载固然好用，但也不能滥用，使用不当反而会适得其反。例如当使用懒加载异步加载组件时，如果页面中嵌套组件过多，浏览器将发送多次的http请求，这样可能会造成网页显示过慢且渲染参差不齐的问题。