React 中组件的 CSS 究竟是什么时候加载/应用的？

Question

我有我的 app.js 导入 someComponent.js。 someComponent.js 然后导入 someStyles.css。但是app.js 只会在单击按钮时使用/渲染someComponent.js。

现在用户的浏览器究竟何时会加载并应用 someStyles.css？ 无论是否按下按钮，它都会在加载页面时立即加载，还是仅在组件实际呈现时请求并加载所述 CSS 文件？

Answer 1

这个问题很难回答，因为它取决于您的应用程序是如何设置和构建的。在开发和部署应用程序时，您的结果甚至可能会有所不同。

但是，您可以使用浏览器开发者工具自行验证这一点。

每个主要浏览器都有开发者工具，其中包含关于“网络”流量的部分。 如果您在“网络”选项卡上打开您的开发人员工具，然后刷新您的页面，您将能够看到从服务器获取资源的时间顺序。

您甚至可以应用一些网络限制来查看页面上的实际效果。

见：

• 铬：https://developer.chrome.com/docs/devtools/network/#load
• 边缘：https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/#log-network-activity
• 火狐：https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#opening_the_network_monitor

您可能也有兴趣阅读有关 code-splitting 的内容，以在加载组件时进行更改。