Как разделить CSS и загружать их только при необходимости в веб-приложении React + ReactRouter (разработано WebPack)

Question

У меня есть веб-приложение, созданное веб-приложением, которое занимает много времени для первой загрузки.После исследования я перепробовал множество улучшений, в том числе использование только критического CSS для рендеринга на стороне сервера.но теперь, после того как SSR закончил, React генерирует намного больше CSS-правил, которые на данный момент не используются, поэтому мой вопрос: возможно ли разделить CSS и загрузить их по требованию (т.е. при изменении маршрута)?

Любая помощь будет оценена.Заранее спасибо!

Answer 1

Динамически импортируемые компоненты / асинхронные компоненты реактивная загрузка .

Answer 2

Я решил проблему с помощью удивительного пакета: «response-universal-component», Вы можете прочитать об этом больше здесь и здесь . Вы можете использовать куски CSS или то, как я это сделал. разбить CSS-файлы в соответствии с вашими компонентами и вызывать их из самого компонента, не используя файл «wholeCss.css» или что-то подобное. Таким образом, вы можете быть уверены, что никакие необходимые CSS не были загружены.

Answer 3

Попробуйте использовать css-modules.

/* style.css */
.className {
  color: green;
}

Допустим, у вас есть вышеуказанный файл стилей.Вы можете использовать приведенный ниже код для применения стилей.

import styles from "./style.css";
const ExampleComponent = () => (
  <div className={styles.className}>
    Hello World!
  </div>
);

Вы должны выполнить настройку веб-пакета, чтобы импортировать файлы CSS для работы.

документация css-modules