[英]Gatsby - Prevent small images from being inlined as a data URI
我正在尝试为我的head
标签中的每个apple-touch-icon
大小提供图像。 我这样做:
// not shown: import all image files: logo57, logo76, etc
<link rel="apple-touch-icon" sizes="57x57" href={logo57} />
<link rel="apple-touch-icon" sizes="76x76" href={logo76} />
<link rel="apple-touch-icon" sizes="120x120" href={logo120} />
<link rel="apple-touch-icon" sizes="152x152" href={logo152} />
<link rel="apple-touch-icon" sizes="167x167" href={logo167} />
<link rel="apple-touch-icon" sizes="180x180" href={logo180} />
问题在于,当页面呈现时,所有这些图像都直接包含在页面中作为数据 URI 中的 base 64,而不是相对 url。 像这样:
<link rel="apple-touch-icon" sizes="180x180" href="data:image/png;base64,iVBORw0KGgoAAAA....">
这是有问题的,原因有几个。 一方面,这些图像仅在渐进式 Web 应用程序场景中需要; 普通桌面浏览器不需要它们,但桌面浏览器被迫下载所有这些 base 64 块,从而减慢了页面加载速度。 其次,即使在 PWA 场景中,每个设备也只需要这些图像中的一个,而不是全部,因此页面加载时间也会减慢。
这是对小于 10,000 字节的图像的记录优化,因此它们都在这里加载可能是微不足道的差异。 但是,原始 png 的总大小总计约 27kb(转换为 base 64 后我不知道),如果不需要,我似乎宁愿不将这些数据包含在每个页面中。
我发现我可以将所有图像移动到 /static 文件夹并使用href="logo57.png"
引用它们,但随后我失去了编译时验证,这些图像实际上也存在于给定的 href 中作为在文件名中包含图像哈希(出于缓存原因)。
如何告诉 Gatsby 不要将这些图像作为数据 URI 直接内联到页面中?
与其将 Webpack 用于这些资产( import x from "..."
),您应该将它们放在static
文件夹中并直接引用它们。 如果您的 Gatsby 站点没有前缀(即index.js
文件是从/
),那么您可以对路径进行硬编码(例如href="/favicon.png"
)。 否则,您将需要使用withPrefix在生产中提供前缀。
您也可以为此使用 GraphQL。 例如,如果您在名为 images 的文件夹中有徽标,您的代码将是这样的:
const data = useStaticQuery(graphql`
query Logo {
file(absolutePath: { regex: "/images/logo.png/" }) {
publicURL
}
}
`)
return <link rel="apple-touch-icon" sizes="57x57" href={data.file.publicURL} />
请注意,您需要使用gatsby-source-filesystem
使您的图像在 GraphQL 中可用。 Gatsby 已经在内部使用了它,因此无需安装它。 只需将它添加到您的gatsby-config.js
:
module.exports = {
plugins: [
{ resolve: `gatsby-source-filesystem`, options: { path: `${__dirname}/src/images` } },
// other plugins here...
],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.