面试题：Vue懒加载预加载在复杂单页应用中的优化策略

预加载优化策略

合理分配预加载时机
- 页面加载初期：在页面开始加载时，就对关键且体积较小的资源进行预加载，例如首屏直接可见区域内的图片、核心子组件等。可以利用 created 钩子函数或者 mounted 钩子函数（如果组件已经挂载到 DOM 上）触发预加载操作。例如在 Vue 组件中：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  created() {
    // 预加载关键资源
    this.preloadCriticalResources();
  },
  methods: {
    preloadCriticalResources() {
      // 这里使用合适的预加载方法，如new Image().src = 'image-url' 预加载图片
    }
  }
}
</script>

- **用户操作预测**：分析用户行为模式，预测用户下一步可能访问的内容并提前预加载。比如在导航栏组件中，当用户将鼠标悬停在某个导航项上时，预加载该导航项对应的页面组件及相关资源。可以通过监听 `mouseenter` 事件实现：

<template>
  <nav>
    <a v - for="(item, index) in navItems" :key="index" @mouseenter="preloadItemResources(item)">{{ item.label }}</a>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { label: '首页', url: 'home - page', resources: ['home - component.js', 'home - image.jpg'] },
        // 其他导航项
      ]
    };
  },
  methods: {
    preloadItemResources(item) {
      // 预加载 item.resources 中的资源
    }
  }
}
</script>

资源优先级设定
- 按功能重要性：对于应用核心功能相关的资源，如用户登录、主要业务展示组件等，设置最高优先级进行预加载。而一些辅助功能、非关键页面的资源，优先级可以降低。
- 按使用频率：统计各个资源被访问的频率，对高频使用的资源优先预加载。例如，如果某个图片在多个页面都频繁展示，那么该图片应优先预加载。可以通过在服务端记录资源访问日志，分析得出使用频率。

懒加载优化策略

组件懒加载：Vue 提供了异步组件来实现组件的懒加载，通过 import() 语法进行动态导入。例如：

<template>
  <div>
    <component :is="asyncComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asyncComponent: null
    };
  },
  mounted() {
    this.loadAsyncComponent();
  },
  methods: {
    loadAsyncComponent() {
      import('./AsyncComponent.vue').then((module) => {
        this.asyncComponent = module.default;
      });
    }
  }
}
</script>

图片懒加载：可以使用 IntersectionObserver API 来实现图片的懒加载。在 Vue 组件中，可以封装一个指令来简化操作：

<template>
  <div>
    <img v - lazy - load="imageUrl" alt="Lazy - loaded image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your - image - url.jpg'
    };
  },
  directives: {
    'lazy - load': {
      inserted(el, binding) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              el.src = binding.value;
              observer.unobserve(el);
            }
          });
        });
        observer.observe(el);
      }
    }
  }
}
</script>

处理内存问题

资源释放：对于已经预加载但不再使用的资源，及时释放内存。例如图片预加载后，如果该图片所在区域已经切换到其他内容，不再需要该图片，可以将其 src 属性设置为空或者移除该 DOM 元素。在 Vue 组件销毁时，清理相关的预加载资源引用：

<template>
  <div>
    <img v - if="isImageNeeded" :src="imageUrl" alt="Pre - loaded image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isImageNeeded: true,
      imageUrl: 'pre - loaded - image.jpg'
    };
  },
  beforeDestroy() {
    if (this.isImageNeeded) {
      // 移除图片 DOM 或者设置 src 为空
      const img = this.$el.querySelector('img');
      if (img) {
        img.src = '';
      }
    }
  }
}
</script>

避免重复加载：建立资源缓存机制，对于已经预加载或者懒加载过的资源，不再重复加载。可以使用一个全局的缓存对象，在加载资源前先检查缓存中是否已经存在该资源：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
const resourceCache = {};

export default {
  created() {
    this.loadResource();
  },
  methods: {
    loadResource() {
      const resourceUrl = 'your - resource - url';
      if (resourceCache[resourceUrl]) {
        // 使用缓存中的资源
        return;
      }
      // 加载资源并添加到缓存
      // 例如加载图片
      const img = new Image();
      img.src = resourceUrl;
      resourceCache[resourceUrl] = img;
    }
  }
}
</script>

星途面试题库

面试题：Vue懒加载预加载在复杂单页应用中的优化策略

知识考点

面试题答案

预加载优化策略

懒加载优化策略

处理内存问题