Загружать CSS-код React только тогда, когда это необходимо

Question

Lighthouse говорит мне «Отложить неиспользованный CSS» для моего приложения React, когда я запускаю аудит. Я реализовал разделение кода, поэтому у меня есть куча фрагментов, каждый из которых содержит свои собственные фрагменты CSS.

Однако, я все еще получаю это предложение от Маяка, и пример для моего куска нижнего колонтитула. Мой нижний колонтитул загружается с использованием react-lazyload, поэтому будет отображаться только при прокрутке страницы вниз.

Проблема в том, что хотя компонент нижнего колонтитула изначально не отображается, его CSS все еще загружается в верхнюю часть страницы, на что жалуется Lighthouse.

Есть ли способ загрузить CSS в голову только после того, как компонент действительно рендерится / нужен?

Для контекста, я работаю с неотгруженным CRA.

Answer 1

С вами все будет в порядке, если вы просто загрузите таблицу стилей из компонента нижнего колонтитула, используя import './styles.css'

Но, возможно, вы также можете попробовать что-то подобное?

import * as React from 'react';

export default class MainPage extends React.Component{

    render(){
        return (
            <div>
                <link rel="stylesheet" type="text/css" href="./style.css" />
                <Footer/>
            </div>
        )
    }
};