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

❝

树酱希望将前端的乐趣带给大家 本文已收录 https://github.com/littleTreeme/frontendThings 喜欢就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() 取代

❞