Question

灯塔告诉我在进行审核后为我的React应用“推迟未使用的CSS”。我已经实现了代码拆分，所以我有一堆块都包含了自己的CSS。

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

仅在需要时加载React块CSS

1 个答案: