Question

我在最新的Vue CLI 3上有一个简单的Vue项目（我都是新手）。在src中，我有100％质量的jpg / png图像。默认情况下，cli生成时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已保存-在控制台中”）。我还尝试将imagemin-webp添加到imageminplugin配置中，但这也不起作用，因为我的源中没有原始的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图像，而只会转换我们选择的文件。感谢这种编译速度更快。 (docs)

Webp支持和检测

如果您正在阅读本文，那么您既要支持.webp也要支持.jpg / .png。在2018年，这是正常做法，因为仅Chrome支持此格式。但是今天（2020年），几乎所有主流浏览器都可以处理webp，包括Microsoft（Edge）的浏览器。 IE永远不会支持它（但是来吧……），Safari仍然落后，但是在最新的Mac OS中也引入了它。随着时间的覆盖范围只能更大。那么，支持多种格式是否值得解决？ Caninuse.com。

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

但是，如果我们需要同时支持.webp和.jpg / .webp格式，则可以通过检测用户代理，标头等以多种方式在JS中实现（在Vue中如此）。对于Nuxt（ SSR-服务器端渲染）是HTML5 <picture>标签（docs），因此可在任何地方（不仅在Vue中）都可以使用的最佳解决方案。

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

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

1 个答案:

如果您急着要简短回答：

长答案：

Webp支持和检测