前端优化之---- 懒加载

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')