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

Question

我有一个大型 Gatsby 网站，其中包含约 10k 篇新闻文章，这些文章是通过无头 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>

Answer 1

Issue 1 - SVGs: Vector files are being added inline. Is there a way to have these reference the path to the image instead of being added inline?

此外，分辨率是最佳的：您正在将图像转换为 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> 标签更优化。

Issue #2 - Styled Components: This is injecting the same CSS into <style> tags into each compiled news article file.

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

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

GatsbyJS - Build files too large (styled components and SVGs)

reactjs

gatsby