懒加载在图片，路由和组件上的应用

懒加载

懒加载是什么样的一种技术？

也叫延迟加载，简单理解就是用户滚动到它们之前，可视范围外的内容会先不加载

引入：

一些电商平台或者是现在的一些新闻网页，当我们需要看到看后面的新闻，我们会做一个下滑的操作，这时候会有一个加载内容的操作

结论：

我们把这种后面用上才加载的技术叫做懒加载

懒加载起到一个什么样的作用？

不使用懒加载技术会如何？

一般vue项目由webpack打包后文件会非常大，这会造成进入首页时需要加载的内容过多，延时过长，白屏的时间过长【白屏时间和浏览器机制有关，后面会有文章讲讲这方面】，不利于用户体验

懒加载作用

使用懒加载，可以将页面划分，需要的时候再加载，可以有效分担首页所承担的加载压力，减少首页加载用时

总结：

• 首屏组件加载速度加快，解决白屏问题，提升用户体验
• 减少无效资源加载，减轻服务器压力，也能够减小浏览器负担
• 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用

具体如何使用懒加载？

目前了解到的应用场景

• 大量的图片

  图片要使用懒加载技术稍微复杂一点，再回过头看看定义：用户滚动到它们之前，可视范围外的图片会先不加载，所以我们要对可是范围做判断，判断懒加载的图片是否进入可视区域
  具体的用法在后续的学习 再更新啦

• 组件懒加载

  原本写法：

  <template>
    <div>
      <test></test>
    </div>
  </template>
  
  <script>
  import test from './test.vue'
  export default {
    components:{
      "test":test
    },
  }
  </script>
  

  懒加载import方法

  <template>
    <div>
      <test><test/>
    </div>
  </template>
  
  <script>
  export default {
    components:{
      "test": ()=>import("./test.vue");
    }
  }
  </script>
  
  

• 路由懒加载

  const test = () => import('需要加载的模块路径')