利用惰性模式提升 Nuxt 的性能

我最喜欢的提升现代 Web 应用程序性能的方法之一，其实很容易解释：

Just load what the user actually needs

听起来很简单，对吧？应该如此，但相信我，随着现代框架的普及和开发速度的加快，我们常常会忘记这种模式，把所有东西都塞进应用程序里，最终让用户也跟着遭殃。

这会导致代码包体积庞大，用户需要传输数兆字节的数据，以及性能不佳。

药品就在我们触手可及的地方。如果用户暂时不需要，只需等到需要的时候再服用即可。

让我们来看我最喜欢的一个例子。假设你的网站（首页）有页眉、横幅和位于首屏下方的页脚。

页眉包含公司标志，横幅包含产品图片，页脚包含 X 张公司成员图片（或者基本上任何其他包含图片的部分）。

页面底部（首屏以下）的图片无需加载，因为用户看不到它们。那么加载它们的意义何在呢？根本没有意义。而这仅仅是第一个例子。

更多内容，请查看下一部分 ;)

图片延迟加载

图片懒加载可以提升网站性能，从而改善用户体验。看看下面的 GIF 动画，里面有可爱的猫咪，效果很棒 :)

img这可以通过使用名为 `layload` 的原生属性来实现loading。要启用延迟加载，只需将其值设置为 `true` 即可lazy。

您可以在这里阅读更多相关信息。

实现延迟加载的效果可以在这里看到：

来源：https ://addyosmani.com/assets/images/without-lazyload@2x.png

在 Nuxt 生态系统中，最好使用 NuxtImage 模块，它支持图片懒加载，您可以在这里查看。

要使用延迟加载，只需按如下方式设置属性：

<nuxt-img src="/nuxt-icon.png" loading="lazy" />

经过这一更改，对这些资源的请求将被延迟，直到它们出现在视口中。

重要提示！

请记住，不要loading="lazy"在需要进行最大内容绘制的元素上使用该属性。

组件动态导入

Nuxt 允许非常轻松地使用组件的动态导入模式。要动态导入组件（也称为延迟加载组件），您只需在组件名称前添加 Lazy 前缀即可：

<template>
  <div>
    <TheHeader />
    <slot />
    <LazyTheFooter />
  </div>
</template>

如果组件并非始终需要，此功能尤其有用。通过使用 Lazy 前缀，您可以延迟加载组件代码，直到合适的时机，这有助于优化 JavaScript 包的大小。

您可以在这里阅读更多相关信息。

惰性数据获取可组合性

两者useLazyFetch都作为常规的 `on`和 ` on` 的useLazyAsyncData包装器，通过设置 `--no -navigation` 选项，可以在处理程序解析之前触发导航。默认情况下，`on` 会阻塞导航，直到其异步处理程序解析完成。useFetchuseAsyncDatalazytrueuseFetchuseAsyncData

这些可组合选项的工作方式lazy如下：

lazy: whether to resolve the async function after loading the route, instead of blocking client-side navigation (defaults to false)

请查看以下代码示例，了解这些惰性求值替代方案的工作原理：

<template>
  <div>
    {{ pending ? 'Loading' : count }}
  </div>
</template>

<script setup>
/* Navigation will occur before fetching is complete.
  Handle pending and error states directly within your component's template
*/
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))

watch(count, (newCount) => {
  // Because count starts out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>

您可以在这里和这里阅读更多相关信息。

懒人补水

这个概念允许你完全控制使用 JavaScript 填充 HTML 的过程，例如通过 on-interaction、on-scroll 等事件触发。我之前的文章已经介绍过这个概念，你可以点击这里查看。

概括

做得好！现在，你对惰性求值模式有了更深入的了解，也知道如何在应用程序中使用它来提升性能，并为用户提供更好的体验。如果你知道其他对开发现代 Web 应用程序有用的模式，也请告诉我 :)