为什么React中不同组件中的所有CSS文件都会被加载？

Question

我在一页上加载多个组件。当然，我会检查条件，然后加载其中一个组件！

主页：

function Home( ) {

    const [pumpCount, setPumpCount] = useState(2);

    useMount(() => {
        console.log("useMount : Home");
        fetch('/home/PumpCount')
            .then(response => response.json())
            .then((response) => {
                console.log("/home/PumpCount : " + response.data);
                //console.log(response);
                setPumpCount(response.data);
                //console.log(pumpCount);
            }).catch(error => {
                console.error('Fetch error:', error);
            });
    });

    return (
        <React.Fragment>
            <Layout>
                <AuthorizeView>
                    {pumpCount === 2 ? <Package2 /> :
                        pumpCount === 3 ? <Package3 /> :
                            pumpCount === 4 ? <Package4 /> :
                                pumpCount === 5 ? <Package5 /> : null}
                </AuthorizeView>
            </Layout>
        </React.Fragment>
    );
}

export default Home;

我还将页面的CSS文件导入到其中一个组件中，例如

import '../assets/css/package2.css';

当我运行该项目时，package2.css和package3.css一起加载。而且页面风格乱了。

问题是什么？我该如何解决它？

Answer 1

捆绑器会加载您导入到页面中的所有组件，包括它们的 css 文件，即使这些组件是有条件渲染的。这可能会导致有关摇树概念的混乱。在这里您可以采用两种方法：

1. 通过

   React.Lazy

   React.Suspense

动态加载组件
2. 将 css 作为模块加载，以确保样式的范围仅限于组件