阅读 2733

《前端那些事》聊聊前端的按需加载

树酱希望将前端的乐趣带给大家 本文已收录 github.com/littleTreem… 喜欢就star✨

前沿:按需加载是性能优化其中的一个环节,可以是图片的按需加载,也就是lazyload来实现按需加载的场景,也可以是组件库的引入,只需部分组件的使用而无需全局引入整个组件库的场景,又可以是路由的按需加载,当路由被访问的时候才加载对应组件的场景,以此来实现更高效率的使用等等,本文把“懒加载”也划分为按需加载

1.图片按需加载

场景:当一个页面存在需要多个图片加载的场景时,可以通过我们经常看到的所谓“懒加载”,当滑动到图片相应的位置时再加载图片的信息,以此来实现按需加载,举个最简单的例子,你去逛淘宝的时候,电商网站图片信息是很多的,这个时候如果把当前页面下的图片都将资源请求过来,是很消耗资源的,对网站的体验也是极其不好,只需要加载你当前“视线”下的图片即可,vue技术栈中vue-lazyload即可实现,下面聊聊它的使用和原理

1.1 vue-lazyload是什么

本质上懒加载就是,在适当的时候加载用户需要看的资源(可视区域),当页面开发时将src路径先预先设置好属性,这样页面加载时图片就不会马上向服务器请求资源,而是当图片滚动到可视区内时,再给src赋值并加载资源,而vue-lazyload就是基于这个概念实现的一个vue的工具库,官方介绍:A Vue.js plugin for lazyload your Image or Component in your application。使用文档点我👈

1.2 正确使用姿势

  • 安装
npm i vue-lazyload 
复制代码
  • 如何使用

在main.js中通过vue实例加载插件

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload);
复制代码

页面中的使用,通过给图片定义v-lazy属性,如下所示

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>
复制代码

1.3实现原理

通过几个核心的点来介绍下vue-lazyload原理

  • 定义LazyClass核心函数并获取lazy对象

通过Lazy和LazyClass得到了lazy这个对象,看看Lazy类的构造函数,源码链接点我

  • 定义自定义指令lazy,区分vue版本 1x和2x的定义

vue-lazyload是通过指令的方式来实现的,定义v-lazy指令,该指令对应的几个回调函数:bind、update、componentUpdated和unbind分别绑定的是lazy对象的add、update、lazyLoadHandler和remove方法,如下所示

关于vue指令可以看官方文档进一步了解:官方文档

  • 通过addLazyBox给图片dom绑定scroll事件,并push到监听队列(listener queue)

指令被bind时会创建一个listener,并将其添加到listener queue里面, 并且搜索target dom节点,为其注册dom事件

  • 通过checkInView检测判断当前dom是否可以加载图片

checkInView方法被封装到_lazyloadHandler的方法,本质上是lazy构造器中使用的lazyloadHandler()函数,通过checkInView()函数检测位置是否需要加载,如果需要返回true,并触发load函数加载图片

它还通过throttle节流函数来限制一个函数在一定时间内只能执行一次,因为像scroll这些事件触发频率高,不做限制的话,一秒之内可能执行几十次

2.组件的按需加载

场景:当我需要使用某个组件库的某个组件时,不想全部加载整个组件库,这个时候就需要按需加载了,可以解决一个首屏加载问题,降低首屏加载时间,举个例子,我现在需要用到element-ui库中的button组件,那我应该如何按需加载呢?

2.1 组件库的按需加载

以element-ui为例子,如果全局加载,会导致打包出来的包体积过大,影响交互体验,如下所示就是一个webpack打包后的webpack-bundle-analyzer工具分析出来的report,你可以通过 vue-cli中的命令生成report.html查看

"scripts": {
    "build": "vue-cli-service build --report",
 }
复制代码

那怎么去通过按需加载去使用组件库,答案是通过babel插件:babel-plugin-component(element 通过fork ant-design库的 )

在babel转码的时候,把整个库element-ui的引用,变为element-ui/lib/button具体模块的引用。这样webpack收集依赖module就不是整个element-ui,而是里面的button

类似如何的转换

如何安装

npm install babel-plugin-component –D
复制代码

使用如下所示👇

在main.js中使用如下

2.2 项目中组件的按需加载

简单理解就是把我们的组件变成了一个函数,起初不执行它,只有你需要它的时候,也就是页面加载时,才触发它加载进来。

3.路由中的按需加载

简单而言则是路由懒加载,当我们用webpack打包并构建应用时,输出的bundle 包会变得非常大,影响页面加载和体验。如果能将不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,而不是一开始全部加载,这样就更加高效了

3.1 vue的异步组件加载

可以将异步组件定义为返回一个 Promise (返回的 Promise 应该 resolve 组件本身)

3.2 结合Webpack 2和ES语法使用import()

我们可以使用动态 import语法来定义代码分块点 (split point)

我们看看import一个组件返回的是什么? promise!

那么如何定义一个能够被 Webpack 自动代码分割的异步组件呢?如下所示

如果你使用的是 Babel去支持import加载,则需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法,否则会报语法错误,如下所示

3.3 webpack的require.ensure() [不推荐]

使用webpack的require.ensure来实现按需加载,不过目前已经被上一节提到的 import() 取代

往期文章