在 Vue CLI 3 中从原始图像创建 webp 图像（作为替代版本）

Question

我在最新的 Vue CLI 3 上有一个简单的 Vue 项目（我都是新手）。在 src 我有 100% 质量的 jpg/png 图像。默认情况下，构建时 cli 将创建 dist 目录，其中我的图像添加哈希（image.jpg 到 image.7a97ca45.jpg）但没有任何压缩。

所以我添加了 imagemin-webpack-plugin 和 imagemin-mozjpeg 和 imagemin-pngquant 来优化。它有效。在 dist 现在我有更小的 jgp 和 png。

const ImageminPlugin = require('imagemin-webpack-plugin').default
const ImageminMozjpeg = require('imagemin-mozjpeg')
const ImageminPngquant = require('imagemin-pngquant')

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        plugins: [
          ImageminMozjpeg({
            quality: 70
          }),
          ImageminPngquant({
            quality: '80-90'
          })
        ]
      })
    ]
  }
}

但现在我还想要从原始 jpg 创建的 .webp 图像。所以我应该得到例如 image.7a97ca45.jpg 和 image.7a97ca45.jpg.webp（或 image.7a97ca45.webp）这样我就可以检测浏览器并提供正确的格式。

但我不明白如何在 vue.config.js 中强制 webpack 创建这些文件。例如，我尝试了 imagemin-webp-webpack-plugin 但这没有任何作用（“imagemin-webp-webpack-plugin: 0 MB saved - in console”）。我还尝试将 imagemin-webp 添加到 imageminplugin 配置中，但这也不起作用，因为我的源代码中没有原始 webp，只想转换新的 webp。

我能找到的关于 webp 的所有主题都适用于普通的 webpack 或较旧的 vue-cli，我取得的最好成绩是通过优化复制整个图像目录或从已经压缩的 jpg（不是原件）创建 webp 图像。但我想保留所有散列等的正常加载程序。什么是最好的方法？

Answer 1

回答我自己两年来的问题，因为它有一些观点。

如果您赶时间的话，简短回答：

如果您将 Nuxt 与 Vue 一起使用，则使用nuxt-optimized-images，对于图像路径，请使用查询?webp而不是.webp扩展名。完毕。

长答案：

我正在使用 Nuxt，我的答案就是这个，但它肯定可以通过手动使用 webpack 加载器在原始 Vue 上完成。

因此，有一个nuxt-optimized-images模块，它简单地将多个 webpack 加载器和 imagemin 与每种格式的插件结合起来。如果您不使用 Nuxt，甚至不使用 Vue，则只需检查文档或源以获取依赖项并手动安装/配置 webp 支持。

它有我们需要内置的webp-loader 。问题是，如何正确地将它与 nuxt-optimized-images 一起使用。我们不能简单地在代码路径中的某个地方输入image.webp，或者image.jpg.webp因为 webpack 会抛出文件不存在的错误（这是我之前也遇到过的问题）。相反，我们需要?webp在文件路径中使用查询，例如<img src="@/assets/images/photo.jpg?webp" />. 库会将请求的文件转换为 webp，一切正常。与其他解决方案相比，它的优点是它不会转换项目中的所有 png/jpg 图像，而只是转换我们选择的文件。感谢这个编译速度更快。（文档）

Webp 支持和检测

如果您正在阅读本文，那么您想同时支持 .webp 和 .jpg/.png。在 2018 年，这是正常做法，因为这种格式仅受 Chrome 支持。但今天（2020 年）几乎所有主流浏览器都支持 webp，包括 Microsoft (Edge) 的一款。IE 永远不会支持它（但是来吧...），Safari 仍然落后，但在最新的 Mac OS 中也引入了它。随着时间的推移，覆盖范围只会更大。那么支持多种格式值得这么麻烦吗？Caninuse.com。

这并不是对每个站点都最好的主意，但也许可以在您的场景中考虑这一点。假设我们有 .jpg 和 .webp 作为网站背景。我们真的需要为旧浏览器提供 .jpg 后备吗？也许只是在 CSS 中制作纯色作为后备会是更好/更容易/更快的解决方案？

但是，如果我们需要支持 .webp 和 .jpg/.webp 格式，那么可以在 JS 中通过检测用户代理、标头等以多种方式完成（SSR - 服务器）。侧面渲染），因此在任何地方（不仅仅是在 Vue 中）都适用的最佳解决方案是 HTML5<picture>标签（文档）。

<picture>
  <source srcset="@/assets/images/screen.png?webp" type="image/webp">
  <img src="@/assets/images/screen.png" alt="Screen">
</picture>