前端優化之---- 懶加載

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