懒加载

路由懒加载

通过动态导入分割代码块，仅在路由被访问时加载对应组件。例如，使用import()语法：

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const routes = [
  { path: '/', component: Home }
];

图片懒加载

使用vue-lazyload插件或Intersection Observer API实现图片懒加载，仅在图片进入视口时加载。例如，使用vue-lazyload：

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'path/to/error-image.png',
  loading: 'path/to/loading-image.gif',
  attempt: 1
});

在模板中使用v-lazy指令：

<img v-lazy="imageUrl" />

懒加载组件

使用defineAsyncComponent或第三方库如vue-lazy-component实现组件懒加载。例如，使用defineAsyncComponent：

import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // load component from server
    resolve(/* loaded component */);
  });
});

这样可以按需加载组件，减少首屏加载时间

使用Webpack的代码分割

通过合理配置Webpack，实现组件和路由的代码分割，从而实现懒加载。例如，配置splitChunks：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

这样可以将不同功能模块的代码分割成不同的文件，按需加载

使用Vite进行懒加载

在Vite配置中定义分块，实现组件懒加载。例如，在vite.config.js中配置：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'group-user': [
            './src/UserDetails',
            './src/UserDashboard',
          ],
        }
      }
    }
  }
});

这样可以将相关组件打包到同一个异步块中，提高加载效率