# 图片懒加载

使用图片懒加载功能,在目标图片还没加载过来时可以先显示 loading 图片。同时在 <img> 进入可视范围才加载请求目标图片

# 基本使用

  • 安装
yarn add vue-lazyload
  • 注册组件
import Vue from "vue";
import VueLazyload from "vue-lazyload";
// 设置图片为加载过来时显示的 loading 图片
import loading from "@/assets/images/loading.gif";
Vue.use(VueLazyload, {
  loading,
});
  • 使用
// 注册图片懒加载组件后会多一个 v-lazy 指令,使用该指令替换 src就可以实现图片懒加载
<img v-lazy="imgUrl">

# 路由懒加载

路由懒加载使用 import 函数,可以让路由组件单独打包。当用户访问该路由时,才会从服务器请求路由资源,也就是动态引入。

# 特点

打包会打包成一个单独的文件
访问哪一个再去加载哪一个

  • 当打包构建应用时,JS 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了

  • 本质就是 Vue 的异步组件在路由组件上的应用

  • 需要使用动态 import 语法,也就是 import () 函数

  • import (' 模块路径 '): webpack 会对被引入的模块单独打包一个小文件

  • 当第一次访问某个路径对应的组件时,此时才会调用 import 函数去加载对应的 js 打包文件

# 基本使用

// 路由懒加载 
// 当路由被访问时,才会调用路由函数
// import Search from "../pages/Search";
const Search = () => import('../pages/Search');