Гэтсби ставит все css в голову - PullRequest
Новая
       1

Гэтсби ставит все css в голову

2 голосов
/ 30 января 2020

Мне интересно, почему Gatsby включает неиспользуемый css в тег head каждой страницы html.

Я создал новый проект

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;

Наконец, я использовал TestContainer на странице 404, и я подумал, что только в результате 404. Страница html будет включать в себя стиль .container в заголовке, но индекс. html и page-2. html также включают стили.

Мой проект содержит много css и индекс. html почти в два раза больше, поскольку включает все css из всего приложения.

Я что-то делаю неправильно или есть причина для этого?

1 Ответ

2 голосов
/ 11 февраля 2020

Гэтсби использует веб-пакет, и в какой-то момент поведение по умолчанию было разделить код CSS (т.е. загружать модули CSS только при необходимости).

Это вызывало нежелательное поведение для некоторых пользователей, поэтому Конфигурация webpack теперь настроена на создание только одного CSS файла.

Подробнее о проблеме здесь: https://github.com/gatsbyjs/gatsby/issues/11072 https://github.com/gatsbyjs/gatsby/commit/7058a256d2dcfab91259bdf00e811375737414e7

Я провел быстрый тест с gatsby-plugin-split- css, и он, кажется, дает вам желаемое поведение. Тем не менее, я буду осторожен, так как вы можете столкнуться с проблемами, указанными в приведенных выше ссылках.

Если вас беспокоит то, что большой блок стилей загружается на каждой странице, тогда я рекомендую вам открыть Network и Elements вкладок в вашем браузере DevTools. Вы заметите, что блок стилей загружается только один раз, и когда вы переходите между страницами, используя <Link> от Gatsby, обновляется только контент, который нужно удалить / добавить.

Так что, если посетители вашего сайта приземляются сначала на index.html и щелкнув от <Link/> до page-2.html, при нажатии они не изменятся по времени загрузки, поскольку тег <style> сохраняется в <head> при нажатии. Однако, если они, вероятно, будут go до page-2.html напрямую с внешнего сайта, то, возможно, я мог бы понять необходимость разделения кода, если CSS на вашей странице index.html действительно длинный.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...