网页优化-图片或组件懒加载

图片懒加载原理示例

IntersectionObserver 链接

图片或组件懒加载组件vue-lazyload文档

vue-lazyload 组件可以 懒加载其他组件

使用IntersectionObserver， 配置observer: true

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)


Vue.use(VueLazyload, {
  observer: true,
// optional
  observerOptions: {
    rootMargin: '0px',
    threshold: 0.1
  }
  lazyComponent: true
})

组件懒加载

<commonModal></commonModal>

<script setup>
    const commonModal = defineAsyncComponent(() => import('@/components/commonModal.vue'))
  
</script>

打包文件大小拆分 使用路由懒加载中的注释 /* webpackChunkName: "home" */,路由最终打包成home.xx.js

{
      path: 'list',
      name: 'riskManageList',
      component: () => import(/* webpackChunkName: "home" */ '@/views/xxx/xxx.vue')
    }

遇到无法拆分的大体积js, 可以使用微应用进行拆分