使用vue-lazyloader实现图片的懒加载

使用vue-lazyloader实现图片的懒加载

---

引言：

在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。

---

懒加载 技术简介：

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

---

图片的懒加载

通俗的来讲，图片的懒加载：图片需要显示在屏幕上时，再进行加载。

使用vue-lazyload库实现图片的懒加载

github官方使用手册：点击进入

步骤：
①终端安装：npm install vue-lazyload --save
②导入：import VueLazyLoad from 'vue-lazyload'
③Vue使用插件：Vue.use(VueLazyLoad)
④修改< img :src='xxx' ...> 为< img v-lazy='xxx' ...>

vue-lazyload中的可选属性：

举例：若需要占位图
在使用插件时，通过

Vue.use(VuelazyLoad,{
    
    
	loading: require(' 路径');// 占位图的路径
})

使用懒加载的导入方法：（项目部分代码）

// 懒加载,提高效率（因为app.js文件中集成了所有的业务代码，因此请求事件可能较长
// 通过将app.js分隔，在需要使用某些js代码的时候，才接收其代码）
const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')

const About = () => import('../components/About')
const User = () => import('../components/User')
const Profile = () => import('../components/Profile')

路由配置推荐使用路由懒加载箭头函数实现

router文件下配置
路由懒加载，使用箭头函数访问效率更快；
使用方法一： component: () => import('../pages/home') 需要访问对应路由的时候才加载
使用方法二： component: Home 会在页面访问时全部提前加载完成

当重新打包，在终端执行npm run build时，他会重新分割成多个JS文件。

懒加载的方式总结