Javascript 如何在React单页Web应用程序中使用AVIF图像

最终更新

出于大多数实际目的，这个问题已经过时了，因为firefox和chrome都通过标准图片html标记（源代码标记为type=“image/avif”）以本机方式支持avif。看见Fire fox仍然喜欢挂起，通常会强制控件F5绕过缓存，并要求从服务器发送正确的内容类型。希望很快就能修好

以下是我获得avif支持的提交：。请注意，它包含许多不相关的更改，事实上avif很少被提及，只是作为内容类型和文件扩展名

原始问题

我正在尝试改变一个网站，在那里我主持网络漫画从使用JPEG到更新的avif图像格式。它体积小得多，似乎是得到最广泛支持的新图像格式。不幸的是，web浏览器还不能正确地支持这种新格式。所以我计划使用这个软件包：允许我的漫画被渲染。一些基本测试表明，AVIF可以在不到一半的空间内提供与jpeg相同的质量

不幸的是，在花了5个多小时的时间之后，我无法让它与我的react框架一起工作。在撰写本文时，您可以在'https://github.com/quackack/quackack-comics/tree/cda4c3893d8477192c4ff3aa78d00096b7621ff7"

我尝试使用npm安装来安装avif.js，然后添加了

require("avif.js").register("/avif-sw.js");

到index.js。但我有一个错误

Failed to register/update a ServiceWorker for scope ‘http://localhost:3000/’: Bad Content-Type of ‘text/html’ received for script ‘http://localhost:3000/avif-sw.js’. Must be a JavaScript MIME type

和avif文件仍无法加载。我认为请求被重新路由到index.html，而不是javascript包。似乎应该这样做

import * as avif from 'avif.js';
avif.register('avif.js/avif-sw.js');

但这也失败了，同样的错误，就像许多其他类似的变化一样

在这一点上，我倾向于等待适当的浏览器支持avif，因为我没有足够的流量来担心数据成本。如果这个问题可以很容易地解决，那么我很想从avif得到改进。我只想要更小的文件大小和广泛的浏览器支持

更新

好的，我发现如果我将默认的react捆绑包（我相信是webpack）更改为Parcel，我就可以实现这一点。然后它会完全按照你的预期工作。。。直到我尝试部署项目

当我尝试将单页web应用作为单页web应用部署到AWS时，存在无法加载服务工作者的问题。在那里，它通过avif-sw.js向我的url发出请求，而实际上没有js文件。我认为这个问题与我们的关系密切

因此，第一个关键是使用Parcel构建您的web应用程序。但似乎Parcel在部署方面仍然存在一些问题。我将在几天后继续调查此事

以下是使用parcel的基本工作版本：

更新2

---

我以前的更新不正确。我认为它之所以能工作是因为缓存了一个服务工作者。我的最终解决方案在下面的答案中。

好的，我终于让它工作了。不幸的是，移动设备似乎无法处理大文件大小，因此我不得不继续使用jpeg。但它在我的笔记本电脑上工作

以下是使一切正常工作的承诺：

我必须做的是：

换成包裹

在构建之前，将avif.js库的内容复制到源代码中。我使用命令：

copyfiles -f node_modules/avif.js/*.js .

将此专门放在reg.js中：

require("avif.js").register("./avif-sw.js");
navigator.serviceWorker.register("./avif-sw.js", undefined);

最后两个步骤所做的是欺骗parcel，使其实际上保留一个“avif sw.js”副本，该副本实际上可以作为服务工作者加载。也许只要稍加修改，您就可以在不使用包裹的情况下实现这一点，只需复制本地文件，然后注册即可。不需要。但当我发现这个解决方案无法在手机上运行后，我停止了调查

调试起来异常困难，因为浏览器缓存了服务人员，每次编辑后我都必须清除broswer数据。调试也很困难，因为源文件是缓存到的，所以我不得不删除我的项目缓存并频繁构建

---

您可能还想使用npm模块“http服务器spa”或类似工具来测试您构建的spa在部署时将如何工作。

现在似乎没有问题。只需使用诸如之类的工具将图像转换为avif，并通过典型的CSS将其用作图像源或背景源。由于Chrome和Firefox现在都支持它（即使用户仍然需要在Firefox上启用它），一切都进展顺利。现在甚至可以在手机上使用了！：）