仅在需要时加载React chunk CSS

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>
        )
    }
};