面试题：Vue项目中如何实现静态资源的按需加载与懒加载

Question

在大型Vue项目中，静态资源（如图片、脚本、样式文件等）较多，按需加载与懒加载有助于提升性能。请详细描述如何针对不同类型的静态资源（如图片使用img标签引入、组件内的脚本和样式）分别实现按需加载与懒加载，涉及到哪些技术点和相关的Vue插件或原生方法。

Answer 1

图片使用 img 标签引入

1. 懒加载
   • 技术点：利用浏览器的原生 loading="lazy" 属性。当设置该属性后，浏览器会在图片进入视口时才加载图片，从而实现懒加载效果。
   • 示例：

<img src="your - image - url.jpg" alt="example" loading="lazy">

2. 按需加载
   • 技术点：结合 Vue 的响应式原理和条件渲染。在需要显示图片的地方，根据某个条件（比如用户操作、特定状态等）来决定是否渲染 img 标签。
   • 示例：

<template>
  <div>
    <button @click="showImage = true">显示图片</button>
    <img v - if="showImage" src="your - image - url.jpg" alt="example">
  </div>
</template>

<script>
export default {
  data() {
    return {
      showImage: false
    };
  }
};
</script>

组件内的脚本和样式

1. 懒加载（组件）
   • 技术点：Vue 的异步组件。使用 defineAsyncComponent 方法（Vue 3）或 () => import('组件路径') 语法（Vue 2 和 Vue 3）来定义异步组件，只有在组件需要渲染时才会加载其脚本和样式。
   • 示例（Vue 3）：

<template>
  <div>
    <button @click="loadComponent = true">加载组件</button>
    <component v - if="loadComponent" :is="asyncComponent"></component>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  data() {
    return {
      loadComponent: false,
      asyncComponent: defineAsyncComponent(() => import('./AsyncComponent.vue'))
    };
  }
};
</script>

• 示例（Vue 2）：

<template>
  <div>
    <button @click="loadComponent = true">加载组件</button>
    <component v - if="loadComponent" :is="asyncComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadComponent: false,
      asyncComponent: () => import('./AsyncComponent.vue')
    };
  }
};
</script>

2. 按需加载（脚本和样式）
   • 相关插件：vue - lazy - load - style 插件（可用于按需加载样式）。对于脚本，可以结合动态 import() 语法。
   • 按需加载样式示例（使用 vue - lazy - load - style）：
     • 安装：npm install vue - lazy - load - style
     • 使用：

<template>
  <div>
    <button @click="loadStyle = true">加载样式</button>
    <lazy - load - style v - if="loadStyle" :src="styleUrl"></lazy - load - style>
  </div>
</template>

<script>
import LazyLoadStyle from 'vue - lazy - load - style';

export default {
  components: {
    LazyLoadStyle
  },
  data() {
    return {
      loadStyle: false,
      styleUrl: './styles.css'
    };
  }
};
</script>

• 按需加载脚本示例：

<template>
  <div>
    <button @click="loadScript">加载脚本</button>
  </div>
</template>

<script>
export default {
  methods: {
    loadScript() {
      import('./your - script.js').then(() => {
        // 脚本加载完成后的操作
      });
    }
  }
};
</script>