GatsbyJS - 构建文件太大（样式化组件和 SVG）答案

【问题标题】：GatsbyJS - Build files too large (styled components and SVGs)GatsbyJS - 构建文件太大（样式化组件和 SVG）
【发布时间】：2022-02-03 14:06:01
【问题描述】：

我有一个大型 Gatsby 网站，其中包含大约 1 万篇新闻文章，这些文章是从无头 CMS 构建的。编译后的站点比我想要的要大一点（2.5gb）。当我研究如何降低总构建大小时，我在构建文件中看到了一些我认为可以优化的重复元素。

问题 1 - SVG：正在内联添加矢量文件。有没有办法让这些引用图像的路径而不是内联添加？

import arrowWhite from "../../images/icons/right-arrow-white.svg";

<img src={arrowWhite}/>

这会输出如下内容：

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTg0cHgiIGhlaWdodD0iMjFweCIgdmlld0JveD0iMCAwIDE4NCAyMSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT5CaXRtYXA8L3RpdGxlPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IjAwX2hvbWVwYWdlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTY0LjAwMDAwMCwgLTM3NDYuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS4wMDAwMDAsIDM3MDguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8aW1hZ2UgaWQ9IkJpdG1hcCIgeD0iMTY1IiB5PSIzOCIgd2lkdGg9IjE4NCIgaGVpZ2h0PSIyMSIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFWb0FBQUFvQ0FZQUFBQy96RElJQUFBQUJHZEJUVUVBQUxHT2ZQdFJrd0FBQUVSbFdFbG1UVTBBS2dBQUFBZ0FBWWRwQUFRQUFBQUJBQUFBR2dBQUFBQUFBNkFCQUFNQUFBQUJBQUVBQUtBQ0FBUUFBQUFCQUFBQldxQURBQVFBQUFBQkFBQUFLQUFBQUFBbFBJNzVBQUFTZjBsRVFWUjRBZTJiQy9nWFV4ckhLOVUvcFlzdTVOS1dub1JZbHhTRjNDKzVycXhMZUt4YTF1YjZhTm5Gcm9ld0h2ZlZlbGgzWVYxeVo3RnVVVUpZUkx1NUpQOVNrV3NsSXBXeW4yODc0emxOTTNQT3pHOW1mci8rTysvemZKdVpjOTdiZVg5bnpublBPLzhhTjZwZGFvSnJuY0U2WUczdnVwWjMzNDZyMEJhMDhhNnR1ZFlCVVF2ZzN5OXZNUDVad1AxUzcva3JydCtBcjcycjd0WDJCZmdFZkE0K0JaK0JqNEJrU3lvalVFYWdqRUNpQ0RST3hMMHljM09hRGdPbkF1bTZBWXdHV3F4Y1NQSTlQV3pNdFR2bzV1Rm5YSnVCV3FJdmNXYTZnZmU1ZjhlREZ1dVN5Z2lVRVNnanNGSUUwaTYwYTZEcEZIQVNVTVpwMGhJZXhvUG53VVF3RlNnelhBMzBCbjNCRm1Cem9FVldtV3REb0JrTTR....." />

有没有办法导入这个，以便编译后的版本引用图像的路径？

<img src="/path/to/right-arrow-white.svg">

问题 #2 - 样式化组件：这是将相同的 CSS 注入到每个已编译的新闻文章文件中的 <style> 标记中。

const HeaderStyle = styled.div`
  position: relative;
  ...
}

<HeaderStyle>...</HeaderStyle>

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

问题 1 - SVG：正在内联添加矢量文件。有没有办法让这些引用图像的路径而不是添加内联？

除了分辨率是最佳的：您正在将图像转换为base64，当然，字符串很长，但对于网络来说处理起来非常轻。如果您愿意，可以使用以下方法导入和内联 SVG：Import SVG as a component in Gatsby

总结一下，做吧：

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /svg-folder/
    }
  }
}

注意：svg-folder 必须只包含 SVG 资源，您只需放置文件夹名称，而不是路径（因为它是正则表达式）。

那么你可以这样做：

import ArrowWhite from "../../images/icons/right-arrow-white.svg";
<ArrowWhite />

注意大写，因为它是一个 React 组件。

这种方法比使用<img> 标记更优化。

问题 #2 - 样式化组件：这是将相同的 CSS 注入 <style> 标记到每个编译的新闻文章文件中。

这与实现严格相关，没有更多细节我不知道出了什么问题。我的猜测是您的styled-components 被注入到每篇文章中。您可以将样式移动到任何独特的外部包装器中以仅注入一次，就像它们是“全局”样式一样。

【讨论】：