加快你的 Nuxt 3.0 应用速度 - 利用 Vite 和 Vsharp 轻松实现自动压缩图像图片通常是网页加载速度慢

本文最初发布于 Mastering Nuxt 博客。

图片是导致网页加载缓慢的最主要原因之一。

我们有一系列应对策略，但最基本的一种是确保应用中的每张图片都尽可能地进行压缩。

幸运的是，通过设置 Nuxt，我们可以自动压缩图片，只需要几分钟的时间。

Nuxt 中的图片

假设我们的应用程序中有一堆图片存储在 /assets 文件夹中。

由于这些图片不在 /public 中，它们不会自动包含在应用的最终构建中。所以我们需要确保在需要它们的地方进行导入。

我们会在模板中使用 img 标签，像这样：

<template>
  <!-- Somewhere in our template -->  
    <img
      :src="screen3"
      class="w-full rounded-lg shadow-lg border-2 border-slate-200"
    />
  <!-- ... -->
</template>

然后确保导入我们需要的图片，就像导入方法或组件一样：

// Import all the images we need
import screen1 from '~/assets/images/screen1.png';
import screen2 from '~/assets/images/screen2.png';
import screen3 from '~/assets/images/screen3.png';
import screen4 from '~/assets/images/screen4.png';
import screen5 from '~/assets/images/screen5.png';

但是这些图片将以原样包含在我们的应用中，没有经过任何压缩。

这是一个问题。

我们希望任何被包含的图片都能在构建过程中自动优化。这样我们可以确保所有图片尽可能小，不会严重影响页面加载速度。

安装和配置 vsharp

有几个用于压缩图片的 Vite 插件，但在本教程中我们将使用 vsharp。我没有详细对比过插件，但这个插件对我来说效果很好。

首先我们先安装它：

pnpm add -D vite-plugin-vsharp

其次，要进行配置，我们需要更新 nuxt.config.ts 文件。我们需要将它添加到 vite 部分的 plugins 字段中。如果你还没有该字段，现在可以添加进去。

你的 nuxt.config.ts 文件最终会类似于这样：

import vsharp from 'vite-plugin-vsharp';

export default defineNuxtConfig({
    // 👇 Add vsharp to the vite plugins
  vite: {
    plugins: [vsharp()],
  },

  // The rest of your Nuxt config
  runtimeConfig: {
    stripeSecret: '',
    stripeWebhookSecret: '',
    public: {
      stripeKey: '',
    },
  },
  nitro: {
    prerender: {
      routes: ['/landing'],
    },
  },
  modules: [
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@nuxtjs/supabase',
    '@pinia/nuxt',
  ],
});

就这样！

现在，当你运行 pnpm build（或 npx nuxi build）时，你会看到它正在压缩应用中使用的每张图片。它还会显示每张图片的压缩比例，以及应用程序包的大小缩小了多少。

这是一次小的配置改动所带来的巨大收益！

原文链接