树酱希望将前端的乐趣带给大家 本文已收录 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() 取代
往期文章
来源：oschina
链接：https://my.oschina.net/u/4333262/blog/4288801