盖茨比把所有的 css 放在头上

Question

我想知道为什么 Gatsby 在每个 html 页面的 head 标签中都包含未使用的 css。

我创建了一个新项目

gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

我添加了一个 css 模块样式的组件

.container {
    margin: 3rem auto;
    max-width: 600px;
    border: dot-dot-dash;
}

import React from "react"
import containerStyles from "./test.module.css"

const TestContainer = ({ children }) => (
    <section className={containerStyles.container}>{children}</section>
)

export default TestContainer;

最后我在 404 页面中使用了 TestContainer，虽然我认为只有生成的 404.html 页面会在头部包含 .container 样式，但 index.html 和 page-2.html 也包含样式.

我的项目包含大量 css，而 index.html 几乎是原来的两倍，因为它包含了整个应用程序中的所有 css。

我做错了什么还是有理由这样做？

Answer 1

Gatsby 使用 webpack，并且在某些时候默认行为是编码拆分 CSS（即仅在需要时加载 CSS 模块）。

这对某些用户造成了一些不良行为，因此 webpack 配置现在设置为仅创建一个 CSS 文件。

在此处阅读有关此问题的更多信息： https://github.com/gatsbyjs/gatsby/issues/11072 https://github.com/gatsbyjs/gatsby/commit/7058a256d2dcfab91259bdf00e811375737414e7

我用gatsby-plugin-split-css 做了一个快速测试，它似乎给了你想要的行为。不过，我会谨慎行事，因为您最终可能会遇到上述链接中提到的问题。

如果您担心每个页面上都加载了大型样式块，那么我建议您在浏览器 DevTools 上打开 Network 和 Elements 选项卡。您会注意到样式块只加载了一次，当您使用 Gatsby 的 <Link> 在页面之间导航时，只会更新需要删除/添加的内容。

因此，如果您的网站访问者首先登陆index.html，然后点击<Link/> 到page-2.html，那么当他们点击时加载时间不会有任何差异，因为<style> 标记仍然存在于@987654333 中@ 当他们点击时。但是，如果他们可能会直接从外部站点访问page-2.html，那么如果您的index.html 页面上的CSS 真的很长，那么也许我可以理解代码拆分的必要性。