css - 仅在需要时加载 React block CSS

Question

当我运行审计时，Lighthouse 告诉我要为我的 React 应用程序“延迟未使用的 CSS”。我已经实现了代码拆分，所以我有一堆 block ，它们都包含自己的 CSS 位。

但是，我仍然从 Lighthouse 那里得到了这个建议，一个例子是我的页脚 block 。我的页脚是使用 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>
        )
    }
};