在您的 Vue 和 Nuxt 应用程序中最小化、生成 WebP 和延迟加载图像

如果标准的图片优化流程对我来说不是那么难，我就不会写这篇文章了。起初，我只是想把我最喜欢的功能应用lazysizes到我正在开发的应用中。我被模块和插件的概念困住了，根本搞不懂它们到底是什么。下一步是图片优化，把现有的 PNG 和 JPEG 格式转换成 WebP 格式——这成了一件令人头疼的事。

我们都读过这样的帖子来查看一个可行的示例，所以它就在这里！

注入 lazysizes

npm i lazysizes——无需解释。

然后创建一个vue-lazysizes.client.js文件并将其放入@/plugins/文件夹。.client文件名称中的表示该插件不应在服务器上运行——这很重要！该文件应该只包含两行：

import lazySizes from 'lazysizes'
export default lazySizes

配置nuxt.config.js：

module.exports = {
  build: {
    extend (config, { isDev, isClient, loaders: { vue } }) {
      if (isClient) {
        vue.transformAssetUrls.img = ['data-src', 'src']
        vue.transformAssetUrls.source = ['data-srcset', 'srcset']
      }
    }
  },
  plugins: [
    '~/plugins/vue-lazysizes.client.js'
  ]
}

您可以看到我们的“插件”已插入，并且在键中我们build扩展了 Webpack 配置，因此 vue-loader 可以转换中的别名data-srcset以及和标签中的属性- 我们将来会需要它。data-srcsrcset<img><source>

就这样！现在你可以像平常一样让图像变得“懒惰”了：

<figure class="picture">
  <img data-src="~assets/images/image.png" class="lazyload" alt="Alternate text for the image">
</figure>

图像优化和转换为 WebP

但是如何缩小图片尺寸，并加载 WebP 图片并实现回退呢？经过几个小时的努力，以及尝试了各种 npm 包，我找到了一个很棒的模块nuxt-optimized-images。我更喜欢分别使用mozjpeg和pngquant来优化 JPEG 和 PNG 图片。

烹饪方法如下：

npm i @bazzite/nuxt-optimized-images imagemin-mozjpeg imagemin-pngquant webp-loader --save-dev— 安装依赖项。

配置nuxt.config.js：

module.exports = {
  modules: [
    '@bazzite/nuxt-optimized-images',
  ],

  optimizedImages: {
    inlineImageLimit: -1,
    handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
    optimizeImages: true,
    optimizeImagesInDev: false,
    defaultImageLoader: 'img-loader',
    mozjpeg: {
      quality: 85
    },
    optipng: false,
    pngquant: {
      speed: 7,
      quality: [0.65, 0.8]
    },
    webp: {
      quality: 85
    }
  }
}

关键的设置optimizedImages是有争议的，但这是我的选择。

完成所有这些操作后，您最终可以使用此代码片段：

<figure class="picture">
  <picture>
    <source data-srcset="~assets/images/image.png?webp" type="image/webp">
    <source data-srcset="~assets/images/image.png" type="image/png">
    <img data-src="~assets/images/image.png" class="lazyload" alt="Alternate text for the image">
  </picture>
</figure>

注意，WebP 图片源是添加了的?webp。

有了这个强大的模块，你可以更进一步，比如创建一个小型的 SVG 回退组件，并在大图像加载时使用。你还可以创建响应式图像、生成回退颜色等等（可能还有很多）。不过，就当做你今天的作业吧。

感谢您的阅读，我希望您在像我一样花几天时间进行实验之前可以通过 Google 找到这篇文章。

鏂囩珷鏉ユ簮锛�https://dev.to/ignore_you/minify-generate-webp-and-lazyload-images-in-your-vue-nuxt-application-1ilm