1、什么是懒加载

意思就是:需要用到的时候才去加载这个资源,也就是 延时加载

在这里插入图片描述

2、为什么要使用懒加载

​ 当进去某个页面时(比如淘宝之类的推荐页面),会有许多的图片等等资源,而这时我们不去翻动看下面的数据,也就意味着这个数据浪费了,白加载了,而且降低了网页的加载速度一个网站如果打开速度太慢,用户体验是极差的

​ 如果使用懒加载,下面的数据等我们往下翻才加载,才不会浪费,这样可以加快页面的加载速度,也可以减少服务器的压力,提高前端的性能

3、懒加载的原理

例如图片懒加载:

  1. 就是先将 图片的src路径,赋给一个html5的自定义属性data-src,(图片地址:https://csdnimg.cn/feed/20200514/83d0b19140c9349b9ed95c54d7723457.png)
  2. 图片的src路径给一个加载中的图片路径(loading)
  3. 等页面显示了那种图片,再将 图片的data-src赋给图片的src路径

代码我就不演示了,因为大部分都是使用插件的

4、懒加载的相应插件

4.1、jQuery — jquery.lazyload.js

可以查看这篇博客:jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

4.2、Vue

可以查阅这篇博客:vue中的懒加载和按需加载

  • 路由懒加载

① 安装 @babel/plugin-syntax-dynamic-import 包。

② 在 babel.config.js 配置文件中声明该插件。

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    "@babel/plugin-syntax-dynamic-import"  // 这路声明
  ]

③ 将路由改为按需加载的形式,示例代码如下:

// 路由懒加载
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ 'views/login/Login')
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐