Vue 组件懒加载，图片懒加载

组件懒加载

1. 结合路由插件使用的时候使用 import 方式实现

// 第一步注释import导入的文件
// import  About from '../components/About.vue';
// 第二步将引入组件的方式以箭头函数的方式异步引入
const routes = [
  {
    
    
    path: '/about'，
    component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' )
  }
]

2. 引入组件的时候使用回调函数的方式引入，比如

// 组件懒加载
const IconList = () => import('components/base/icon-list');

export default {
    
    
  components: {
    
    
    IconList,
  },
};

图片懒加载
就是在加载页面的时候，如果页面中的图片过多，可以使用占位符的方式替换没有在可是区域内的图片，只加载当前需要现实的图片。监听滚动条的位置，当图片标签出现在可视区域的时候，重置图片的路径为真是路径，然后展示图片地址。一般在实际开发的时候都直接使用图片懒加载插件实现。还有一种解决方案就是使用页面骨架屏效果，也是类似占位显示，当数据加载完成之后替换掉占位显示的内容