我想知道为什么 Gatsby 在每个 html 页面的 head 标记中包含未使用的 css。
我创建了一个新项目
gatsby 新的 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。
我做错了什么还是有理由这样做？
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/>to page-2.html，那么他们点击时的加载时间不会有任何差异，因为<style>标签会在<head>他们点击时持续存在。但是，如果他们可能page-2.html直接从外部站点访问，那么如果您index.html页面上的 CSS真的很长，那么也许我可以理解需要进行代码拆分。
| 归档时间： |
|
| 查看次数： |
2176 次 |
| 最近记录： |