关于vue.js：在Vue CLI 3中从原始图像创建Webp图像(作为替代版本)

Create webp images (as alternative version) from original images in Vue CLI 3

我在最新的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。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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图像。但是我想保留所有散列等普通加载器。什么是最好的方法呢？

相关讨论

回答我两年来的问题，因为它有一些见解。

如果您着急的话，简短回答：

如果将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，例如。库会将请求的文件转换为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中实现(在Vue中如此)。Nuxt(SSR-服务器)侧面渲染)因此最好的解决方案是HTML5 标签(文档)，该解决方案可在任何地方(不仅在Vue中使用)。

1
2
3
4