图片懒加载
使用图片懒加载功能，在目标图片还没加载过来时可以先显示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');