发布于 由admin

如何利用 Vue 的 `Suspense` 组件和 `lazy` 加载，设计一个渐进式加载（Progressive Loading）的页面，提升首屏渲染速度？

各位前端界的大佬、小萌新们，大家好！我是今天的主讲人，咱们今天的主题是：“Vue Suspense + lazy：打造飞一般的首屏渲染速度”。

相信大家都有过这样的体验：打开一个网页，半天刷不出来，急得想砸电脑。这其实就是首屏渲染速度慢导致的。今天，我们就来学习如何利用 Vue 的 Suspense 组件和 lazy 加载技术，让我们的页面像火箭一样嗖嗖地加载出来，提升用户体验。

一、什么是渐进式加载？

简单来说，渐进式加载就是让页面先加载最关键的内容，让用户尽快看到页面骨架和核心信息，然后再逐步加载其他次要的资源。这样，用户就不用傻傻地等待整个页面加载完毕，而是可以一边浏览，一边等待其他内容加载完成。

想象一下，你在餐厅点了一份套餐，厨师不是等你所有的菜都做好了才一起端上来，而是先给你上主菜，让你先吃着，然后再慢慢上配菜和甜点。这就是渐进式加载的思想。

二、Suspense：你的异步组件救星

Vue 3 中引入的 Suspense 组件，可以让我们优雅地处理异步组件的加载状态。它就像一个占位符，当异步组件正在加载时，它会显示一个 fallback 内容，等到异步组件加载完成后，再显示实际的内容。

Suspense 的基本用法如下：

<template>
  <Suspense>
    <template #default>
      <MyComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

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

const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

export default {
  components: {
    MyComponent,
  },
};
</script>

在这个例子中，MyComponent 是一个异步组件，使用 defineAsyncComponent 函数进行定义。当 MyComponent 正在加载时，Suspense 会显示 "Loading…"。一旦 MyComponent 加载完成，就会替换掉 "Loading…"。

三、lazy 加载：按需加载，节省资源

lazy 加载，也称为懒加载，是一种延迟加载资源的策略。它只在需要的时候才加载资源，而不是一次性加载所有资源。这可以有效地减少页面的初始加载时间，并节省带宽。

在 Vue 中，我们可以使用 import() 函数来实现 lazy 加载。

const MyComponent = () => import('./MyComponent.vue');

这个 import() 函数返回一个 Promise，只有在组件需要被渲染时，才会触发加载。

四、Suspense + lazy：黄金搭档，提升首屏速度

现在，让我们将 Suspense 和 lazy 加载结合起来，打造一个渐进式加载的页面。

假设我们有一个页面，包含以下几个组件：

  • Header：页面头部，包含网站 Logo 和导航栏。
  • MainContent：页面主要内容，包含文章列表。
  • Sidebar：页面侧边栏，包含广告和推荐内容。
  • Footer：页面底部，包含版权信息。

其中，MainContent 组件比较复杂，加载时间较长。我们可以使用 Suspense 和 lazy 加载来优化它的加载过程。

首先，将 MainContent 组件定义为异步组件：

const MainContent = () => import('./MainContent.vue');

然后，在父组件中使用 Suspense 包裹 MainContent 组件：

<template>
  <div>
    <Header />
    <Suspense>
      <template #default>
        <MainContent />
      </template>
      <template #fallback>
        <div>Loading Main Content...</div>
      </template>
    </Suspense>
    <Sidebar />
    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue';
import Sidebar from './Sidebar.vue';
import Footer from './Footer.vue';
import { defineAsyncComponent } from 'vue';

const MainContent = defineAsyncComponent(() => import('./MainContent.vue'));

export default {
  components: {
    Header,
    MainContent,
    Sidebar,
    Footer,
  },
};
</script>

这样，当页面加载时，会先加载 Header、Sidebar 和 Footer 组件，并显示 "Loading Main Content…" 作为 MainContent 组件的占位符。等到 MainContent 组件加载完成后，才会替换掉占位符。

五、更进一步：配合 Skeleton 骨架屏

为了提升用户体验，我们可以使用 Skeleton 骨架屏来代替简单的 "Loading…" 提示。Skeleton 骨架屏是一种模拟页面结构的占位符，可以让用户在等待内容加载时，看到一个大致的页面轮廓，从而减少用户的焦虑感。

我们可以使用 CSS 或现成的 Vue 组件库（如 vant、element-ui 等）来创建 Skeleton 骨架屏。

例如，我们可以创建一个 MainContentSkeleton.vue 组件，用于模拟 MainContent 组件的结构：

<template>
  <div class="skeleton">
    <div class="title"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</template>

<style scoped>
.skeleton {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.title {
  width: 80%;
  height: 20px;
  background-color: #f2f2f2;
  margin-bottom: 10px;
  animation: pulse 1.5s infinite ease-in-out;
}

.content {
  width: 100%;
  height: 16px;
  background-color: #f2f2f2;
  margin-bottom: 8px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
</style>

然后，在 Suspense 组件的 fallback 插槽中使用 MainContentSkeleton 组件：

<template>
  <div>
    <Header />
    <Suspense>
      <template #default>
        <MainContent />
      </template>
      <template #fallback>
        <MainContentSkeleton />
      </template>
    </Suspense>
    <Sidebar />
    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue';
import Sidebar from './Sidebar.vue';
import Footer from './Footer.vue';
import MainContentSkeleton from './MainContentSkeleton.vue';
import { defineAsyncComponent } from 'vue';

const MainContent = defineAsyncComponent(() => import('./MainContent.vue'));

export default {
  components: {
    Header,
    MainContent,
    Sidebar,
    Footer,
    MainContentSkeleton,
  },
};
</script>

这样，当 MainContent 组件正在加载时，会显示 MainContentSkeleton 骨架屏，让用户看到一个模拟的页面结构。

六、代码示例：一个完整的渐进式加载页面

下面是一个完整的渐进式加载页面的代码示例：

  • App.vue：根组件
<template>
  <div>
    <Header />
    <Suspense>
      <template #default>
        <MainContent />
      </template>
      <template #fallback>
        <MainContentSkeleton />
      </template>
    </Suspense>
    <Sidebar />
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Sidebar from './components/Sidebar.vue';
import Footer from './components/Footer.vue';
import MainContentSkeleton from './components/MainContentSkeleton.vue';
import { defineAsyncComponent } from 'vue';

const MainContent = defineAsyncComponent(() => import('./components/MainContent.vue'));

export default {
  components: {
    Header,
    MainContent,
    Sidebar,
    Footer,
    MainContentSkeleton,
  },
};
</script>
  • components/Header.vue：头部组件
<template>
  <header>
    <h1>My Awesome Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>
</template>

<style scoped>
header {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

h1 {
  margin-bottom: 10px;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}
</style>
  • components/MainContent.vue：主要内容组件
<template>
  <main>
    <h2>Latest Articles</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <h3>{{ article.title }}</h3>
        <p>{{ article.content }}</p>
      </li>
    </ul>
  </main>
</template>

<script>
export default {
  data() {
    return {
      articles: [],
    };
  },
  async mounted() {
    // 模拟异步请求
    await new Promise((resolve) => setTimeout(resolve, 2000));
    this.articles = [
      { id: 1, title: 'Article 1', content: 'This is the content of article 1.' },
      { id: 2, title: 'Article 2', content: 'This is the content of article 2.' },
      { id: 3, title: 'Article 3', content: 'This is the content of article 3.' },
    ];
  },
};
</script>

<style scoped>
main {
  padding: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

h3 {
  margin-bottom: 5px;
}
</style>
  • components/MainContentSkeleton.vue：主要内容骨架屏组件
<template>
  <div class="skeleton">
    <div class="title"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
</template>

<style scoped>
.skeleton {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.title {
  width: 80%;
  height: 20px;
  background-color: #f2f2f2;
  margin-bottom: 10px;
  animation: pulse 1.5s infinite ease-in-out;
}

.content {
  width: 100%;
  height: 16px;
  background-color: #f2f2f2;
  margin-bottom: 8px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
</style>
  • components/Sidebar.vue：侧边栏组件
<template>
  <aside>
    <h2>Sidebar</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </aside>
</template>

<style scoped>
aside {
  background-color: #fafafa;
  padding: 20px;
  border: 1px solid #eee;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}

a {
  text-decoration: none;
  color: #333;
}
</style>
  • components/Footer.vue：底部组件
<template>
  <footer>
    <p>&copy; 2023 My Awesome Website</p>
  </footer>
</template>

<style scoped>
footer {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
</style>

在这个示例中，MainContent 组件模拟了一个异步请求，需要 2 秒才能加载完成。在使用 Suspense 和 lazy 加载后，页面会先加载 Header、Sidebar 和 Footer 组件，并显示 MainContentSkeleton 骨架屏。等到 MainContent 组件加载完成后，才会替换掉骨架屏。

七、优化技巧：更上一层楼

除了上述基本用法，我们还可以使用一些技巧来进一步优化渐进式加载的效果：

  • 代码分割 (Code Splitting): 将你的应用拆分成更小的 chunks，按需加载。Webpack、Parcel 等打包工具都支持代码分割。
  • 优先加载关键 CSS: 将首屏需要的 CSS 内联到 HTML 中，避免阻塞渲染。
  • 使用 CDN: 将静态资源部署到 CDN 上，利用 CDN 的加速效果。
  • 图片优化: 使用合适的图片格式和压缩算法，减少图片的大小。可以使用 webp 格式，并使用 srcset 属性提供不同尺寸的图片。
  • 服务端渲染 (SSR) 或预渲染 (Prerendering): 对于 SEO 友好的页面，可以考虑使用 SSR 或预渲染。

八、Suspense 的局限性

虽然 Suspense 非常强大，但也存在一些局限性：

  • 错误处理: Suspense 目前没有提供完善的错误处理机制。如果异步组件加载失败，我们需要手动处理错误。
  • 嵌套 Suspense: 嵌套 Suspense 组件可能会导致一些问题，需要谨慎使用。
  • 服务端渲染: 在服务端渲染中使用 Suspense 需要一些额外的配置。

九、总结

通过 Suspense 组件和 lazy 加载，我们可以轻松地实现渐进式加载，提升页面的首屏渲染速度，改善用户体验。配合 Skeleton 骨架屏和各种优化技巧，可以让我们的页面更加流畅和高效。

希望今天的讲座能对大家有所帮助。下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注